我在菜单中使用基于em的余量来进行同类(在标记,类,id等方面)项目.据我所知,每个项目的边距应该相同.但是,有些渲染为1px,有些渲染为2px.可能有一些模式(例如,每第二个项目呈现为2px),但不是我能辨别的.
我在Linux和OS X上都观察到了Firefox和Chrome中的这种行为.
我猜这是因为每个这些边距的计算值是一个十进制数(根据chrome devtools为1.6px),但为什么不一致地呈现相同的十进制数？
下面有一个codepen示例,我还包括一个展示问题的屏幕截图的放大图.
最佳答案
我只是猜测,这只是一个猜测,但如果它将它四舍五入到最接近的整个像素(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,2px(重复)2px,这在我看来实际上是相同的填充.
