2

我注意到 Chrome 浏览器中元素大小的问题。
我写了一个简单的代码：

<html>
<body>
<table border="1px">
<tbody>
<tr>
    <td>
        <span style="display: inline-block; width: 5cm">TEXT</span>
        <span style="display: inline-block; width: 5cm">TEXT</span>
        <span style="display: inline-block; width: 5cm">TEXT</span>
        <span style="display: inline-block; width: 5cm">TEXT</span>
    </td>
</tr>
</tbody>
</table>
</body>
</html>

我希望有 4 个垂直重复的跨度，每个 5 厘米。它适用于 IE、Firefox 等：
IE - 工作正常

但是 Chrome 遇到以下问题：
Chrome - 不起作用

在 IE 中，span 的宽度为 189px，td 的宽度为 772px。
在 Chrome 中，span 的宽度为 189px，td 的宽度为 771px。

这是某种 Chrome 问题吗？为什么我的 td 元素不适合它的内容？对我来说，保留这些跨度元素（我不能用 div 替换它们）并以厘米为单位设置宽度是很重要的。当我删除表格边框时，问题仍然存在。

4

1 回答 1

2

cm如果您想要固定数量的像素，CSS单位是不可靠的。他们也不太可能在屏幕上实际测量 5 厘米。该cm单元主要用于打印样式。是的，它可以在屏幕上使用，但不要期望它有任何准确性。

一个框被渲染为 189 像素的事实5cm告诉我们，acm不是像素的整数。仅此一项就足以告诉您，您不太可能使用cm单位获得准确的像素级跨浏览器渲染。

它只是不会发生。如果您想要像素完美的精度，请使用px单位。

你在问题中说你不能改变单位。如果可能的话，你真的应该重新考虑，因为它只会不断给你这些问题。

如果你真的不能改变它们，那么我能想到的在不改变单位的情况下解决你的问题的一种方法是给<td>元素一个white-space:nowrap样式。无论浏览器是否认为它们应该存在，这都应该强制所有跨度到同一行。它应该为您解决问题。但这并不能解决根本问题，如果您继续使用cm屏幕上的单位，它可能会以其他方式出现。

至于究竟是什么导致了故障，我猜 Chrome 处理浮点像素值的方式略有不同，并且当它添加跨度的像素宽度以计算出多宽时存在舍入误差使<td>. 如果是这种情况，那么这听起来像是 Chrome 中的一个错误，您可以向他们报告，但鉴于我上面所说的一切，我看不出他们将其作为高优先级问题。

于 2012-11-13T13:07:54.720 回答