Css 为什么在chrome和firefox中，具有相同字体大小和线条高度的跨距具有不同的渲染高度

小提琴：

在FF上，渲染跨距高度为18px，而在chrome上，渲染跨距高度为16px

为什么会有差异，以及如何在不同浏览器之间实现一致的渲染

HTML:

编辑： 删除线条高度和长方体大小属性，因为它们似乎没有任何区别。

---

这可能会有帮助：根本没有帮助。你能指出发生这种情况的确切原因吗。我的css很简单，我给出的字体大小是像素（不是相对单位），还提供了一个特定的线高度。如果在各自的浏览器中检查渲染范围，检查程序将在计算属性中分别显示字体大小和行距为15px和30px。但是chrome和firefox的渲染跨距高度相差2倍。是什么导致了这种差异以及如何解决这种差异。请看，CSS并没有定义应该发生什么。@Oriol感谢您的帮助。我的问题是如何解决这个问题。如何确保浏览器间的一致性（像素完美）渲染。这可能会有帮助：根本没有帮助。你能指出发生这种情况的确切原因吗。我的css很简单，我给出的字体大小是像素（不是相对单位），还提供了一个特定的线高度。如果在各自的浏览器中检查渲染范围，检查程序将在计算属性中分别显示字体大小和行距为15px和30px。但是chrome和firefox的渲染跨距高度相差2倍。是什么导致了这种差异以及如何解决这种差异。请看，CSS并没有定义应该发生什么。@Oriol感谢您的帮助。我的问题是如何解决这个问题。如何确保跨浏览器的一致（像素完美）渲染。

<span>Different height span</span>

span {
  font-size: 15px;
  line-height: 2;
  box-sizing: border-box;
}