Chrome为何包装此表?

时间:2012-06-29 08:48:32

标签: html css google-chrome html-table

我可能错过了显而易见的,但是为什么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没有正确计算宽度,或者我错过了一些东西。我想知道发生了什么。

3 个答案:

答案 0 :(得分:2)

将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到最后一栏。

答案 1 :(得分:2)

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

所以可能的解决方案是:

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

答案 2 :(得分:1)

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

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