css - 与 Chrome/Firefox 相比，IE 中的表格单元格已移动

Question

我在 IE 中的表格方面遇到一些问题。 有趣的是，只有一些表选择这样做，但尽管如此，我不明白为什么。 真的，这并不是说它破坏了布局或其他什么，但我仍然想知道它为什么这样做。 我附上了一张图片，以便您明白我的意思:

上面是Chrome/Firefox，下面是IE。 我知道表格等在不同的浏览器中有点不同，但通常差异是几个像素左右。 我已经使用了我能找到的所有重置 CSS 方法，因此每个浏览器中的所有内容都应该是相同的。

表格的构成如下:

<table class="AdminAccess">
            <tr>
                <td>********</td>
                <td><img alt="" height="16" src="../images/edit.png" width="16"></td>
                <td><a href="admins_edit.html">Edit</a></td>
                <td><img alt="" height="16" src="../images/mail.png" width="16"></td>
                <td><a href="#">Send new password</a></td>
                <td><img alt="" height="16" src="../images/delete.png" width="16"></td>
                <td><a href="#">Delete</a></td>
            </tr>
            <tr>
                <td>********</td>
                <td><img alt="" height="16" src="../images/edit.png" width="16"></td>
                <td><a href="admins_edit.html">Edit</a></td>
                <td><img alt="" height="16" src="../images/mail.png" width="16"></td>
                <td><a href="#">Send new password</a></td>
                <td><img alt="" height="16" src="../images/delete.png" width="16"></td>
                <td><a href="#">Delete</a></td>
            </tr>
            <tr>
                <td>********</td>
                <td><img alt="" height="16" src="../images/edit.png" width="16"></td>
                <td><a href="admins_edit.html">Edit</a></td>
                <td><img alt="" height="16" src="../images/mail.png" width="16"></td>
                <td><a href="#">Send new password</a></td>
                <td><img alt="" height="16" src="../images/delete.png" width="16"></td>
                <td><a href="#">Delete</a></td>
            </tr>
            <tr>
                <td>********</td>
                <td><img alt="" height="16" src="../images/edit.png" width="16"></td>
                <td><a href="admins_edit.html">Edit</a></td>
                <td><img alt="" height="16" src="../images/mail.png" width="16"></td>
                <td><a href="#">Send new password</a></td>
                <td><img alt="" height="16" src="../images/delete.png" width="16"></td>
                <td><a href="#">Delete</a></td>
            </tr>
        </table>

表格本身的宽度为 70%，并且类 AdminAccess 具有以下 CSS:

table.AdminAccess tr td:nth-child(1) {width:48%;}
table.AdminAccess tr td:nth-child(2) {width:3%; padding:4px 0px 0px 0px;}
table.AdminAccess tr td:nth-child(3) {width:11%;}
table.AdminAccess tr td:nth-child(4) {width:3%; padding:4px 0px 0px 0px;}
table.AdminAccess tr td:nth-child(5) {width:30%;}
table.AdminAccess tr td:nth-child(6) {width:3%; padding:4px 0px 0px 0px;}
table.AdminAccess tr td:nth-child(7) {width:2%; text-align:right}
table.AdminAccess tr td {
    vertical-align:middle;
    padding:5px;
}

然后是一些背景 CSS，这里应该不重要。

所以基本上，我不知道为什么它在 IE 中表现得像这样，而不是在其他浏览器中。就像我说的。这只是我的一些 table 。有些风格完全像这样，但内容不同，就不这样做。 所以，我迷路了。 再说一遍，这对于布局本身并不重要，但如果知道出了什么问题那就太好了。

Answer 1

对于table.AdminAccess tr td:nth-child(7)，您已指定width: 2%。

表格宽度的 2% 不足以包含“删除”。

因此，浏览器必须调整其他列的宽度来进行补偿。恰好Chrome/Firefox在这一调整上与IE9有所不同。

这是我制作的测试用例:http://jsfiddle.net/thirtydot/hC53w/show/

Chrome/IE9 之间的列不对齐:

一旦我将“删除”更改为“!”，它们就会对齐:http://jsfiddle.net/thirtydot/hC53w/1/show/