2

我在 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 中的行为如此，而不是在其他浏览器中。就像我说的。这只是我的一些桌子。一些，完全像这样的风格，但内容不同，不要这样做。所以，我迷路了。同样，这对布局本身并不重要，但很高兴知道出了什么问题。

4

1 回答 1

2

对于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/

于 2012-05-12T16:47:06.793 回答