Firefox 和 IE8 中的 CSS 表格单元格填充问题

Question

我在尝试调整表格中的布局时遇到一些严重的问题。 在 Firefox 中，我发现所有文本的顶部/底部填充不一致。 在 Firefox 和 IE8 中，我似乎也无法让我的图标在单元格中垂直居中显示。

如下：

alt 文本 http://www.graphicsdistrict.com/css-issue.png< /a>

这是我的表格 css：

table.maxwidth {
    width: 100%;
}

table.standard th {
    color: white;
    font: bold 0.85em Century Gothic;
    padding: 0.6em;
    background-color: #424E4F;
}

table.standard td {
    padding: 0.2em 0.5em;
}

table.standard tr + tr > td {
    border-top: 1px dotted #ccc;
}

table.standard th + th {
    border-left: 1px solid white;
}

table.standard td + td {
    border-left: 1px dotted #ccc;
}

table.standard > tfoot > tr > td {
    border-top: 0.18em solid #424E4F;
    padding: 0.2em 0.5em;
}

table.striped tr.alt td {
    background-color: #eee;
}

table.hover tr:hover td {
    background-color: #e0e0e0;
}

这是我的表格 HTML：

<table class="standard maxwidth striped hover">

    <thead>
        <tr>
            <th class="left">Accessory</th>
            <th class="center">Available</th>
            <th class="right">Options</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td class="label"><a href="/mss/Accessory/Edit/4">Mains Charger</a></td>
            <td class="center">

            <img src="/mss/Static/images/icons/tick.png" /></td>
            <td class="right">
            <a href="/mss/Accessory/Archive/4" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a>
            / <a href="/mss/Accessory/Delete/4" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;">Delete</a>

            </td>
        </tr>

        <tr>
            <td class="label"><a href="/mss/Accessory/Edit/3">Bluetooth Headset</a></td>
            <td class="center">

            <img src="/mss/Static/images/icons/tick.png" /></td>
            <td class="right">
            <a href="/mss/Accessory/Archive/3" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a>

            / <a href="/mss/Accessory/Delete/3" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;">Delete</a>
            </td>
        </tr>

        <tr>
            <td class="label"><a href="/mss/Accessory/Edit/2">Car Kit</a></td>
            <td class="center">

            <img src="/mss/Static/images/icons/tick.png" /></td>

            <td class="right">
            <a href="/mss/Accessory/Archive/2" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a>
            / <a href="/mss/Accessory/Delete/2" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;">Delete</a>
            </td>
        </tr>

        <tr>
            <td class="label"><a href="/mss/Accessory/Edit/1">Leather Phone Case</a></td>

            <td class="center">

            <img src="/mss/Static/images/icons/tick.png" /></td>
            <td class="right">
            <a href="/mss/Accessory/Archive/1" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a>
            / <a href="/mss/Accessory/Delete/1" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;">Delete</a>
            </td>
        </tr>


    </tbody>
    <tfoot>
        <tr>
            <td colspan="3"><a href="/mss/Accessory/New">Add an Accessory</a></td>
        </tr>
    </tfoot>
</table>

请注意，单元格内容之前和/或之后的间距似乎不会影响该问题，无论是积极还是消极。

编辑

将 CSS 更改为使用 px 单位而不是 em 可以修复左列文本摇动，但不能解决垂直图像居中问题。 有想法吗？

编辑2

现在有一个问题的演示在线此处< /a>.

Answer 1

图像在基线上垂直对齐，为下降部分留出空间 - 以防万一你添加文字。 与底部垂直对齐，多余的空间就会消失。

td img {vertical-align:bottom;}

Answer 2

尝试使用像素作为填充和边框，看看是否可以解决问题。 我怀疑您使用 ems 的事实会产生一些奇怪的舍入故障，从而导致 4px/5px 的差异。

Answer 3

在您的单元格中尝试此操作，尽管我相信单元格需要在其中指定高度，但要使其起作用。

css 垂直对齐

Answer 4

<td valign="middle"> 

这不是最好的方法，因为你不使用 css，但它总是对我有用。

另外，看看单元格的 line-height css 属性。 如果您的单元格高 20 像素，请将行高设置为 20 像素等。