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

Question

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

如下所示：

替代文字http://www.graphicsdistrict.com/css-issue.png

这是我的表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

现在， 这里在线展示了该问题。

Answer 1

图像在基线上垂直对齐 ，为下级留有空间-以防万一您添加文本。 垂直对齐底部，多余的空间就会消失。

td img {vertical-align:bottom;}

Answer 2

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

Answer 3

<td valign="middle"> 

这不是最好的方法，因为您不使用CSS，但是它始终对我有用。

顺便看一下单元格的行高css属性。 如果您的单元格高度为20px，则将line-height设置为20px等。

Answer 4

在您的单元格中尝试此操作，尽管我相信这些单元格需要在其中指定一个高度，但此方法才能起作用。

CSS垂直对齐