css – Chrome中的奇怪边框宽度行为 – 浮点边框？

某些流体设计，特别是涉及％-width iFrames的流体设计似乎在Chrome中引起了一些奇怪的四舍五入错误(我已经有版本21)。

This Fiddle演示了这个问题。将边框设置为整数像素值，当您要求时返回的值是比预期值略小的浮点数。

尝试exact same code in CodePen不会产生相同的结果，大概是因为它的iFrame和其他样式没有设置相同的方式。

(我也看到这个行为的基本的宽度和高度属性，虽然我无法复制该部分的问题在jsfiddle。)

这在Firefox或IE8中似乎不是问题。

任何关于什么，特别是引起这种奇怪行为的想法，以及如何解决这个问题，以达到真正的价值观？

剧情增厚。为了摆脱这个问题，我发现超过10px的值似乎不会受到这个问题的影响。

另外，根据@ GionaF的评论，它似乎在Chrome 22中正常工作。

解决方法

要重现您的问题，我必须更改Chrome的缩放级别。将缩放级别更改回100％将其修复。它似乎是一个错误，计算的边框宽度总是小于定义的边框宽度，放大或缩小！

当缩放级别为110％时，您的10px边框的值为10，但125％的边框与3px边框的问题相同。

编辑：firefox有同样的行为！

原文地址：https://www.jb51.cc/css/218776.html