Question

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

见如下：

alt text 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来修复左列文本jog，但不能解决垂直图像居中问题。想法？

编辑2

现在有一个问题online here的演示。

Answer 1

基线上的图像为vertically aligned，为下降器留出空间 - 以防您添加文字。垂直对齐底部，额外的空间消失。

td img {vertical-align:bottom;}

Answer 2

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

Answer 3

<td valign="middle">

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

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

Answer 4

在你的细胞中尝试这个，为了这个工作，虽然我相信细胞需要在它们中指定的高度。

css vertical-align

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

4 个答案: