Question

我在IE中遇到了一些表格问题。有趣的是，它只是选择这样做的一些表，但是，我无法弄清楚为什么。真的，并不是它破坏了布局或其他东西，但我仍然想知道它为什么会这样做。我附上了一张照片，你可以看到我的意思：

enter image description here

顶部是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中表现得像这样，而不是其他浏览器。就像我说的。这只是我的一些表格。有些，完全像这样，但有不同的内容，不要这样做。所以，我迷路了。同样，并不重要的是布局本身，但知道什么是错误会很好。

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/

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

1 个答案: