html - 跨度在 Firefox 上未正确对齐

Question

我有两个 span 在 Firefox 上没有正确对齐:

.foo {
  padding : 3px 8px;
}

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

它在所有 IE 和 Chrome 浏览器上都很好，但由于某些原因在 Firefox 上，左跨度与右跨度不对齐。看起来右边的跨度向底部多了一个像素。

如果我删除 foo 类，它就可以工作，但为什么 firefox 不能正确对齐这些跨度？

Answer 1

Firefox 与 Lato 的配合不佳。调整字体系列以相互匹配(或不使用 Lato)可以解决问题。