Firefox与Chrome的跨度高度不同

Question

以下元素：

<span>Test</span>

span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
}

Chrome的高度为19px，Firefox（fiddle）的高度为21px。我尝试应用各种CSS重置/规范化，高度仍然不同。文本本身的渲染方式相同，但元素高度偏离2个像素，这会破坏我的布局。

有没有使用（内联）块元素来修复它的方法？

Answer 1

用这个 ：

span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
  display: inline-block;
}

不同之处在于浏览器中的字体呈现方式不同。

Answer 2

这是一个众所周知的问题。这是因为Firefox和Chrome分别使用不同的渲染引擎Gecko和Webkit。不幸的是，没有'最好'的方法来修复它。

你可以在this answer和this one找到一些解决方法。

Answer 3

由于span是内联元素，您应该像下面这样重写代码：

document.querySelectorAll("span").forEach(el => {
  el.textContent = el.offsetHeight + "px";
});

span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
  display: inline-block; /* Key line */
  vertical-align: top; /* It is recommended when using "display: inline-block"*/
}

<span>Test</span>

Answer 4

关于高度差异，问题在于您还添加了字体大小，族和行高。

所以因为这三件事：

font-family: Verdana;
font-weight: bold;
line-height: 1.15;

你的文字大小比16px大。

Answer 5

这种行为的原因是你使用的是span，它是一个内联元素。它不会根据行高更改其容器高度，而是基于其父块元素。显然，Chrome和Firefox有不同的默认样式。

要么使用span使display: block成为块元素，要么将其替换为像div这样的块元素。