当使用em单位作为框的边距(边距：0.25em)时,在Firefox中,我在顶部/左边获得4px,在右边/底部获得3px – 基于14px字体大小(实际上是框的字体 – 浏览器16px的大小0.875em).
现在,我是新手,很有可能我误解了几件事但是使用了我的理解,我认为0.25p的14px是3.5px.如果是这种情况,并且舍入是边距中4或3像素的原因,这真的是它应该如何工作吗？具有舍入结果的某个计算应该每次完全相同,不是吗？此外,在Internet Explorer中,它恰恰相反：顶部/左侧是3px,右侧/底部是4px.我尝试将值更改为0.286em(x 14px – > 4.004px)以避免最终达到正好半个像素并且这在Firefox中为4/4/4/4,在IE中为4/3/4/3.
除了这些像素错误之外,更改浏览器字体大小实际上非常好地扩展了所有内容.
我疯了,我误解了什么,浏览器都破了还是……什么？ (使用IE8和FF3和19.)
解决方法
浏览器有时会向上舍入某个值并在其他时间向下舍入相同的值,以便整个舍入操作均匀.
最好的例子是缩放页面.页面通常在移动设备上缩放,但如果用户手动缩放页面,也可以在桌面浏览器上缩放.缩放页面时,以前为整数的px值现在是浮点值.同样,用于转换为px中的整数值的em或％值现在转换为浮点值.
为了使浏览器能够根据屏幕像素绘制元素的大小或位置,它必须将每个值四舍五入为整数.如果整体均匀化,则四舍五入才有效.
例
假设您有3个浮动div,每个100px,组合宽度为300px.该页面在移动设备上缩放为通常大小的2/3.缩放div的组合宽度应为200px.
如果每个缩放div的(大致)66.7px被向上舍入,则每个将为67px,这相当于201px(1太多).如果每个div向下舍入,则每个div为66px,最多为198px(2太少).如果舍入不一致(将其中两个向上舍入,将另一个向下舍入),则将大小加到200px的唯一方法是.
当缩放应用于具有位置和大小值的绝对定位元素时,或者应用于具有从子画面文件中获取的背景图像的元素时,缩放元素的舍入中的任何不均匀性都是非常明显的.
浏览器支持
我最后一次检查时,Firefox是唯一能够有效扩展页面的浏览器,以正确的方式平衡舍入值.其他浏览器可能会做一些这样的事情(希望它会越来越好),但过去做得不好.
