在Firefox上没有正确对齐的跨度

Question

我在Firefox上没有正确对齐两个跨度：

＆＃13;

＆＃13;

.foo {
  padding : 3px 8px;
}

＆＃13;

<span class='foo' style='background-color:blue; font-family: Arial'>FOO</span>
<span class='foo' style='background-color: green; font-family: Lato'>BLAH</span>

＆＃13;

＆＃13;

＆＃13;

在所有IE浏览器和Chrome浏览器上完全没问题，但由于某些原因，Firefox上的左侧跨度与右侧跨度不对齐。看起来右边距离底部是一个px太多了。

如果我删除了foo类，它可以正常工作，但为什么这个世界上的firefox没有正确对齐这些跨度？

Answer 1

Firefox与Lato的关系不佳。使字体系列相互匹配（或不使用Lato）可以解决问题。