与em不一致的保证金

Question

我在菜单中使用基于em的边距来表示同类（在标记，类，id等方面）项目。据我所知，每个项目的边距应该相同。但是，有些渲染为1px，有些渲染为2px。可能有一些模式（例如，每第二个项目呈现为2px），但不是我能辨别的。

我在Linux和OS X上的Firefox和Chrome中都观察到了这种行为。

我猜这是因为每个这些边距的计算值是十进制数（根据chrome devtools为1.6px），但为什么不是一致地呈现相同的十进制数呢？

下面有一个codepen示例，我还包括一个展示问题的屏幕截图的放大。

http://codepen.io/anon/pen/KoAbl

Answer 1

我只是猜测，这只是一个猜测，但是如果它将它四舍五入到最接近的整个像素（1.6 =＆gt; 2），然后在下一个填充中考虑该舍入。由于填充上次为0.4像素太多，下次将为1.6 - 0.4 = 1.2像素，其舍入为1像素。

下一个将是1.6 + 0.2，即1.8，并且舍入为2.接下来将是1.6-0.2 = 1.4，向下舍入为1.接下来将是1.6 + 0.4 = 2，并且从那个模式重复本身又来了。

这意味着填充是2px，1px，2px，1px，2px（重复）2px，1px，2px，1px，2px，这在我看来实际上是相同的填充。

Answer 2

我无法确切地告诉你如何计算em。但我可以告诉你它可能是由于字体大小的四舍五入。您将字体大小更改为10px或20px，并且不一致性消失。将其更改为15px，问题又回来了。

看这篇文章： CSS: Em rounding error