我可能遗漏了一些显而易见的东西，但是关于 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 没有正确计算宽度，或者我可能遗漏了一些东西。我想知道发生了什么。
最佳答案
这里只是猜测，但我相信 Chrome 在计算表格单元格的宽度时确实会出错。由于内联元素不应该有边距，它计算 td 的宽度时不考虑边距。但无论如何它都会绘制带有边距的跨度，因此跨度太宽以适应 td 的计算宽度，使它们环绕。
所以可能的解决方案是:
- 制作 span
inline-block，因为内联 block 通常可以有边距，这样计算就可以了 - 计算最终的总宽度，并为 td 提供该宽度
- 从 span 中移除边距并将其提供给 imgs
- 根本不使用边距，但给 td 一些填充
关于html - 为什么 Chrome 会包裹这个表格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11258707/