最近，我重写了我正在制作的网站的CSS文件，并尝试使用em而不是px使大多数元素和字体的大小动态。尺寸工作..有点，但至少有一个问题。
当使用em单位作为框的边距（边距：0.25em）时，在Firefox中，我在顶部/左边获得4px，在右边/底部获得3px - 基于14px字体大小（实际上是框的字体大小0.875em浏览器的16px）。
现在，我是新手，很有可能我误解了几件事，但是根据我的理解，我认为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。）
答案 0 :(得分：7)
浏览器有时会向上舍入某个值并在其他时间向下舍入相同的值，以便整个舍入操作均匀。
最好的例子是缩放页面。页面通常在移动设备上缩放，但如果用户手动缩放页面，也可以在桌面浏览器上缩放。缩放页面时，以前为整数的px值现在是浮点值。同样，用于转换为em中的整数值的%或px值现在转换为浮点值。
为了使浏览器能够根据屏幕像素绘制元素的大小或位置，它必须将每个值四舍五入为整数。如果它整体均匀化，那么四舍五入的效果会很好。
示例
假设您有3个浮动div，每个100px，组合宽度为300px。该页面在移动设备上缩放为通常大小的2/3。缩放div的组合宽度应为200px。
如果每个缩放div的（大致）66.7px被向上舍入，则每个都将67px，这加起来为201px（1太多）。如果每个div都向下舍入，则每个div都为66px，这加起来为198px（2太少）。将大小加起来为200px的唯一方法是，如果舍入不一致（将其中两个向上舍入，将另一个向下舍入）。
当缩放应用于具有位置和大小值的绝对定位元素时，或者应用于从精灵文件中获取背景图像的元素时，缩放元素的舍入中的任何不均匀性都会非常明显。
浏览器支持
我最后一次检查时，Firefox是唯一能够有效扩展页面的浏览器，以正确的方式平衡舍入值。其他浏览器可能会做一些这样的事情（希望它会越来越好），但过去做得不好。
这种方法 - 适用于页面缩放 - 可能与您遇到的行为类型相同，但乍看之下可能并不明显为什么会发生这种情况。
答案 1 :(得分：2)
从那个意义上讲，他们并没有真正被打破。不同的浏览器只是以不同的方式实现像素舍入。
如果您需要这样的细粒度测量，最好使用不以十进制值结束的较粗糙值或精确像素值而不是ems。请记住，ems是相对数量;它们是为缩放而设计的，而不是针对需要精确度的情况。