Question

我可能错过了显而易见的，但是为什么Chrome包装在这个表中的最后一列？它不应该计算列宽以使内容适合吗？（假设表格实际上没有填满页面）。 IE和Firefox似乎都渲染得很好（或者至少是我期望它渲染的方式）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.imgLink {
    margin: 0 8px;
}
</style>
</head>

<body>
    <table border="1">
        <tr>
        <td>Some text</td>
        <td>Some more text</td>
        <td><span class="imgLink"><a href=""><img src="iconEdit.gif">Edit</a></span>
            <span class="imgLink"><a href=""><img src="iconDelete.gif">Delete</a></span></td>
        </tr>
    </table>
</body>
</html>

修改

表格未填充可用的页面宽度。

以下是显示Chrome中包装的屏幕截图：

Chrome screenshot

我实际上找到了解决方法 - 只需将white-space: nowrap;添加到表的最后一列。尽管如此，我认为Chrome没有正确计算宽度，或者我错过了一些东西。我想知道发生了什么。

Answer 1

将display：inline-block添加到imgLink类：http://jsfiddle.net/surendraVsingh/MFZX2/4/

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.imgLink {
    margin: 0 8px;
    display:inline-block;
}
</style>
</head>
<body>
    <table border="1">
        <tr>
        <td>Some text</td>
        <td>Some more text</td>
        <td><span class="imgLink"><a href=""><img src="https://dl.dropbox.com/u/19982181/a.png">Edit</a></span>
            <span class="imgLink"><a href=""><img src="https://dl.dropbox.com/u/19982181/a.png">Delete</a></span></td>
        </tr>
    </table>
</body>
</html>

Grodriguez的另一个答案是应用白色空间：nowrap到最后一栏。

Answer 2

在这里猜测，但我相信Chrome在计算表格单元格的宽度时会出错。由于内联元素不应具有边距，因此它会计算td的宽度而不考虑边距。但是它无论如何都会绘制带有边距的跨度，所以跨度要宽到适合td的计算宽度，使它们包裹起来。

所以可能的解决方案是：

制作跨度inline-block，因为内联块通常可以有边距，然后计算就可以了
计算最终总宽度是多少，并给出宽度为
从跨度中移除边距并将其提供给imgs
根本不使用边距，但给td一些填充

Answer 3

要添加到SVS的答案，我怀疑的原因是span是一个内联元素，因此不允许有余量。我会想象chrome说“好吧，如果你想要一个余量，你必须要它成为一个块元素”，从而使它成为一个块元素。现在，作为一个块元素，它不会并排放置两个span并且换行也是如此。

将display设置为inline-block的工作与从样式中删除margin属性的工作方式相同，这一点得到了充分证实。

Chrome为何包装此表？

3 个答案: