某些流体设计,特别是涉及%-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有同样的行为!