我注意到 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 - Works fine
但是 Chrome 遇到以下问题:
Chrome - Doesn't work
在 IE 中，span 的宽度为 189px，td 的宽度为 772px。
在 Chrome 中，span 的宽度为 189 像素，td 的宽度为 771 像素。
这是 Chrome 的某种问题吗？为什么我的 td 元素不适合其内容？对我来说，保留这些 span 元素(我不能用 div 替换它们)并以厘米为单位设置宽度很重要。当我删除表格边框时，问题仍然存在。
最佳答案
CSS cm如果您想要固定数量的像素，则单位是不可靠的。他们也不太可能在屏幕上实际测量 5 厘米。 cm单位主要用于打印样式。是的，它可以在屏幕上使用，但不要指望它有任何准确性。
事实是 5cm框渲染为 189 像素告诉我们 cm不是像素的整数。仅此一点就足以告诉您，您不太可能使用 cm 获得准确的像素级跨浏览器渲染。单位。
这不会发生。如果您想要像素完美的精度，请使用 px单位。
您在问题中说您无法更改单位。如果可能的话，您真的应该重新考虑，因为它只会继续给您带来这些问题。
如果您确实无法更改它们，那么我能想到的在不更改单位的情况下解决您的问题的一种方法是给出 <td>元素a white-space:nowrap风格。这应该强制所有跨度到同一行，无论浏览器是否认为它们应该在那里。它应该能帮到你。但它并不能解决根本问题，如果您继续使用cm，它可能会以其他方式回来。屏幕上的单位。
至于到底是什么导致了故障，我猜测 Chrome 处理浮点像素值的方式略有不同，并且当它添加跨度的像素宽度来计算时，存在舍入错误<td> 有多宽。如果是这种情况，那么这听起来像是 Chrome 中的一个错误，您可以向他们报告，但鉴于我上面所说的一切，我看不到他们将其作为一个高优先级问题。
关于html - Chrome "cm"问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13360742/