Question

我有一个带文字的div，使用自定义字体，例如谷歌字体。字体大小以像素为单位定义，并定义行高。在Firefox中，块的高度计算为476，而在Chrome中则为472。

http://jsbin.com/wezasekafo/1/edit?html,css,output

* {
  padding: 0;
  margin: 0;
}
div {
  font-family: "Roboto";
  font-size: 35px;
  width: 500px;
  line-height: 1.7;
  border: 1px solid;
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">


<div>
  Lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text,
  lines of text, lines of text

</div>

我正在努力了解那里发生了什么，以及是否有办法解决它。

Answer 1

在Chrome＆amp;中运行以下代码段Firefox - 您将获得单行文本的高度（减去边框的2px贡献）：

Chrome：59
Firefox：59.5

var height = document.querySelectorAll('body > div')[0].clientHeight;
console.log(height);

* {
  padding: 0;
  margin: 0;
}
div {
  font-family: "Roboto";
  font-size: 35px;
  width: 500px;
  line-height: 1.7;
  border: 1px solid;
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<div>
  Lines of text
</div>

注意：另请参阅javascript报告与检查元素时看到的内容的区别

理论上line height是：

35px x 1.7 = 59.5px

有问题的演示有8行 - 因此：

Chrome：59px x 8 = 472px
Firefox：59.5px x 8 = 476px

这是由于着名的子像素问题 - 浏览器处理小数像素的方式 - 请参阅另一个示例in this SO thread。

Firefox和Chrome中计算高度的差异

1 个答案: