3

我可能遗漏了显而易见的内容，但是关于 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 没有正确计算宽度，或者我可能遗漏了一些东西。我想知道发生了什么。

4

3 回答 3

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

于 2012-06-29T08:50:31.250 回答
2

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

所以可能的解决方案是：

  • 制作跨度inline-block，因为内联块通常可以有边距，然后计算就可以了
  • 计算最终的总宽度并给 td 该宽度
  • 从跨度中删除边距并将其提供给 imgs
  • 根本不使用边距，但给 td 一些填充
于 2012-06-29T12:13:39.913 回答
1

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

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

于 2012-06-29T10:20:54.647 回答