使用em单位时边距不一致

Question

5

我在菜单中使用基于em的边距来对齐（标记、类、ID等方面均相同）项目。据我所知，每个项目的边距应该呈现出相同的效果。但是，有些被呈现为1px，而有些被呈现为2px。可能存在某种模式（例如，每隔一个项目呈现为2px），但我无法识别。

我观察到这种行为发生在Firefox和Chrome上，在Linux和OS X上都发生。

我猜测这是由于每个边距的计算值为小数（根据chrome devtools为1.6px），但为什么不一致地呈现相同的小数？

下面是一个codepen示例，并且我还包括了一个放大截图以演示这个问题。

- ebenpack

可能是字体渲染不同造成的：http://codepen.io/anon/pen/fDBpt - Arbel

@Arbel 我不确定我理解你的意思。我不明白为什么字体在不同行上会被渲染得不同，但即使它们是这样，我也不明白这会如何影响一些元素上的1.6像素向下舍入，而在其他元素上向上舍入的问题。 - ebenpack

看一下我在http://codepen.io/anon/pen/fDBpt上提供的代码片段，左边框已经完美地对齐了填充边缘，但是从视觉上来说，在字母S和左边框之间有1px的空隙，而在左边框和字母F之间没有空隙。 - Arbel

@Arbel 我认为 S 只是获得了更多的间距或字距，或者其他什么（抱歉，我不是一个字体专家，所以我不知道正确的术语）。如果您将文本更改为每行相同，则问题仍然存在。而且我认为这并不重要，因为无论字体如何呈现，每行都具有相同的1.6像素边距，这是不一致地四舍五入的。 - ebenpack

2个回答

1

我无法告诉你如何准确计算em的值。但我可以告诉你它可能是由于字体大小的四舍五入而产生的。当您将字体大小更改为10px或20px时，不一致性会消失。将其更改为15px时，问题会再次出现。

- tgeery

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Erik Lumme · Accepted Answer

我只是猜测，这只是一个猜测，但如果它将其舍入到最接近的整数像素（1.6 => 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，这似乎就是您实际拥有的填充。