Chrome "cm“问题
我注意到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中，每个跨度的宽度为189px，而td的宽度为772px。
在Chrome中，跨度的宽度为189px，td的宽度为771px。
这是不是Chrome的问题？为什么我的td元素不适合它的内容？对我来说，重要的是继续使用那些span元素(我不能用例如div替换它们)，并以厘米为单位设置宽度。删除表格边框时问题仍然存在。
回答 1
Stack Overflow用户
发布于 2012-11-13 21:07:55
如果你想要一个固定的像素数，CSS cm单位是不可靠的。他们也不太可能在屏幕上实际测量5厘米。cm单元主要用于打印样式。是的，它可以在屏幕上使用，但不要指望它有任何准确性。
5cm框呈现为189个像素的事实告诉我们，cm不是整数个像素。仅此一点就足以告诉您，使用cm单元不太可能获得精确的像素级跨浏览器渲染。
这是不会发生的。如果您想要像素级的精度，请使用px单位。
你在问题中说你不能改变单位。如果可能的话，你真的应该重新考虑一下，因为它只会继续给你带来这些问题。
如果您确实不能更改它们，那么我能想到的解决问题而不更改单位的一种方法是给<td>元素一个white-space:nowrap样式。这应该强制所有跨度在同一条线上，而不管浏览器是否认为它们应该在那里。它应该能帮你解决这个问题。但它并没有解决根本问题，如果你继续在屏幕上使用cm单元，它很可能会以其他方式回来。
至于到底是什么导致了这个毛刺，我猜测Chrome对浮点像素值的处理略有不同，当它添加跨度的像素宽度来计算出<td>的宽度时，存在舍入误差。如果是这样的话，这听起来像是Chrome的一个bug，你可以向他们报告，但考虑到我上面所说的一切，我看不到他们会把它作为一个高优先级的问题。
https://stackoverflow.com/questions/13360742
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号