Chrome 为什么要包装这张桌子？答案

【问题标题】：Why does Chrome wrap this table?Chrome 为什么要包装这张桌子？
【发布时间】：2012-06-30 19:16:54
【问题描述】：

我可能遗漏了显而易见的内容，但有任何关于为什么 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 中的包装的屏幕截图：

我实际上找到了一个解决方法——只需将white-space: nowrap; 添加到表格的最后一列。不过，我相信 Chrome 没有正确计算宽度，或者我可能遗漏了一些东西。我想知道发生了什么。

【问题讨论】：

标签： html css google-chrome html-table

【解决方案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 提出的另一个答案是将 white-space: nowrap 应用于最后一列。

【讨论】：

感谢您的回答。但是我实际上不希望表格填满所有可用的宽度——我只希望它的大小合适，以便内容适合而不换行。
如果没有空间，它将自动换行。没有其他办法，您必须为表格提供宽度，或者您必须更改最后一列的内容样式（减小图像或字体大小）
如我的问题中所述，该表格未填充可用的页面宽度。有足够的空间，但它正在包装。而且这只发生在 Chrome 中，不会发生在 FF 或 IE 中。为什么？
这是 firefox 显示的内容dl.dropbox.com/u/19982181/fiddle.jpg 你怎么能说它在 firefox 13 中工作，除非你发布整个代码。
让我们continue this discussion in chat

【解决方案2】：

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

将display 设置为inline-block 的工作原理与从样式中删除margin 属性一样，这一事实几乎证实了这一点。

【讨论】：

无论如何，边距都会被默默地忽略，所以我认为这不能回答为什么会发生这种情况的问题。
克里斯，谢谢，但正如@MrLister 所说，我真的不认为这能解释问题。 Chrome 并未按照您的建议将这些跨度作为块元素处理 - 查看屏幕截图，您会看到它包裹在第二个跨度的中间，而不是两个跨度之间。
@MrLister：删除边距解决问题的事实表明，尽管 Grodriguez 说我感到困惑并且它没有将它们视为块，但它并没有被默默地忽略......
@Chris 是的，对不起，我写的时候我的电脑正在崩溃，所以我无法测试，但我现在看到了，这绝对是非常奇怪的行为，我怀疑不是应该发生的事情。现在做更多的测试；不确定是否将其称为 Chrome 中的错误。

【解决方案3】：

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

所以可能的解决方案是：

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

【讨论】：

关于这一点的说明：如果我正确解释了规范，则实际上允许内联元素有边距。请参阅第 10.3 节：w3.org/TR/CSS2/visudet.html#inline-width，以及这些测试用例：meyerweb.com/eric/css/tests/css2/sec10-03-01.htm。因此，虽然我相信您对 Chrome 所做的解释是正确的，但我会说 css 是正确的（即我相信这只是 Chrome 中的一个错误）。