javascript - 为什么某些字体的元素的 scrollHeight 和 clientHeight 不一样？

Question

对于某些字体当line-height的元素小于阈值 scrollHeight大于 clientHeight .

所以字体属性中有些东西会导致这种情况，但这是什么和如何避免最好使用 CSS 甚至自定义字体的字体编辑器？

例如，在此代码段中，scrollHeight对于 Tahoma超过clientHeight虽然 sans-serif line-height 时似乎没问题是 1。当页面在 Chrome (ctrl+) 中放大时，这种差异会增加甚至对于无衬线字体也会发生。当 line-height 低于 1 或 font-size 变大时，差异会增加。

对于其他一些字体，它上升到 5px 在 line-height 1 处，并通过将 line-height 增加到 2 来减少，这会导致计算不正确。

var a = document.getElementById('a');
console.log('tahoma - a.clientHeight: ' + a.clientHeight);
console.log('tahoma - a.scrollHeight: ' + a.scrollHeight);

var b = document.getElementById('b');
console.log('sans - b.clientHeight: ' + b.clientHeight);
console.log('sans - b.scrollHeight: ' + b.scrollHeight);

var c = document.getElementById('c');
console.log('sans - lineHeight:0.5 - c.clientHeight: ' + c.clientHeight);
console.log('sans - lineHeight:0.5 - c.scrollHeight: ' + c.scrollHeight);

var d = document.getElementById('d');
console.log('sans - font-size:200px - d.clientHeight: ' + d.clientHeight);
console.log('sans - font-size:200px - d.scrollHeight: ' + d.scrollHeight);

div[id] {
 overflow:auto;
 max-width:80%;
}

<div id='a' style='font-family:tahoma; line-height:1;'>Hello</div>
<div id='b' style='font-family:sans-serif; line-height:1;'>Hello</div>
<div id='c' style='font-family:sans-serif; line-height:0.5;'>Hello</div>
<div id='d' style='font-family:sans-serif; line-height: 1; font-size:500px;'>Hello</div>

很明显，这种差异是由于溢出问题造成的，但这里涉及到哪些字体度量以及我们如何识别 scrollHeight 之间的差异？和 clientHeight ?

发生这种情况 在 Chrome 和 Firefox 中 ;我没有测试其他浏览器。

Answer 1

为了让问题更加明显，我们引入 span里面div并添加一些边框/背景。让我们从使用大 line-height 开始:

body {
 font-family:sans-serif;
}
div {
  border:1px solid;
  margin:10px;
}
span {
  background:red;
}

<div style='line-height:3;'><span>Hello</span></div>

红色部分定义了内容区域，边框包围的空间是行框，它是我们的 div 元素的高度(查看更多信息: Why is there space between line boxes, not due to half leading?)。

在这种情况下，我们没有任何溢出，所以 scrollHeight和 clientHeight将给出相同的值:

var a = document.getElementById('a');
console.log('clientHeight: ' + a.clientHeight);
console.log('scrollHeight: ' + a.scrollHeight);

body {
 font-family:sans-serif;
}
div {
  border:1px solid;
  margin:10px;
}
span {
  background:red;
}

<div id="a" style='line-height:3;'><span>Hello</span></div>

我们还可以得出结论，两者都完全等于 3 * 16px这是 line-height * font-size ref (默认情况下 font-size 是 16px )。

现在，如果我们开始对 line-height 进行衰减我们将在逻辑上降低 div 的高度，并且内容区域将保持不变:

body {
 font-family:sans-serif;
}
div {
  border:1px solid;
  margin:10px;
}
span {
  background:red;
}

<div style='line-height:3;'><span>Hello</span></div>
<div style='line-height:1;'><span>Hello</span></div>
<div style='line-height:0.5;'><span>Hello</span></div>
<div style='line-height:0.2;'><span>Hello</span></div>

现在很明显我们有溢出和 clientHeight现在将小于 scrollHeight但是 clientHeight将保留 line-height * font-size而 scrollHeight将是红色部分的高度:

var a = document.querySelectorAll('.show');
var b = document.querySelectorAll('.show span');

for(var i=0;i<a.length;i++) {
console.log('cH: ' + a[i].clientHeight + ' sH: ' + a[i].scrollHeight);
}

body {
 font-family:sans-serif;
 font-size:100px;
 padding-bottom:100px;
}
div.show {
  border:1px solid;
  margin:100px;
}
span {
  background:red;
}

<div class="show" style='line-height:3;'><span>Hello</span></div>
<div class="show" style='line-height:1;'><span>Hello</span></div>
<div class="show" style='line-height:0.5;'><span>Hello</span></div>
<div class="show" style='line-height:0.2;'><span>Hello</span></div>
<div class="show" style='line-height:0.1;'><span>Hello</span></div>
<div class="show" style='line-height:0;'><span>Hello</span></div>

但是为什么 scrollHeight 的值在内容区域保持不变的情况下会减少吗？这是因为我们在顶部和底部有一个溢出(因为对齐是基线)和 scrollHeight仅包括底部溢出，因为顶部变得无法访问。制作 scrollHeight等于内容区域我们只需要更改对齐方式:

var a = document.querySelectorAll('.show');
var b = document.querySelectorAll('.show span');

for(var i=0;i<a.length;i++) {
console.log('cH: ' + a[i].clientHeight + ' sH: ' + a[i].scrollHeight);
}

body {
 font-family:sans-serif;
 font-size:100px;
 padding-bottom:100px;
}
div.show {
  border:1px solid;
  margin:100px;
}
span {
  background:red;
  vertical-align:text-bottom;
}

<div class="show" style='line-height:3;'><span>Hello</span></div>
<div class="show" style='line-height:1;'><span>Hello</span></div>
<div class="show" style='line-height:0.5;'><span>Hello</span></div>
<div class="show" style='line-height:0.2;'><span>Hello</span></div>
<div class="show" style='line-height:0.1;'><span>Hello</span></div>
<div class="show" style='line-height:0;'><span>Hello</span></div>

现在很清楚，如果 line-height足够大，两者相等，如果 line-height减少了 scrollHeight具有等于​​内容区域的最小值。

如果我们检查 the specification我们可以读到:

The 'height' property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)

Note: level 3 of CSS will probably include a property to select which measure of the font is used for the content height.

所以我们无法知道用于定义该区域的确切指标，这就是为什么它对每种字体的行为不同的原因。我们只能知道它取决于 font-family和 font-size .我们可能会发现手动进行一些测试的计算。对于上面的例子，内容区域的高度似乎是 1.12 * font-size
对于 tahoma好像是 1.206 * font-size (在 Chrome 上)和 1.21 * font-size (在 Firefox 上)(见下文):

var a = document.querySelectorAll('.show');
var b = document.querySelectorAll('.show span');

for(var i=0;i<a.length;i++) {
console.log('cH: ' + a[i].clientHeight + ' sH: ' + a[i].scrollHeight);
}

body {
 font-family:tahoma;
 font-size:1000px;
 padding-bottom:100px;
}
div.show {
  border:1px solid;
  margin:100px;
}
span {
  background:red;
  vertical-align:text-bottom;
}

<div class="show" style='line-height:3;'><span>Hello</span></div>
<div class="show" style='line-height:1;'><span>Hello</span></div>
<div class="show" style='line-height:0.5;'><span>Hello</span></div>
<div class="show" style='line-height:0.2;'><span>Hello</span></div>
<div class="show" style='line-height:0.1;'><span>Hello</span></div>
<div class="show" style='line-height:0;'><span>Hello</span></div>

所以 scrollHeight等于 p * font-size在哪里 p取决于字体，我们可以手动找到它做一些测试和 clientHeight等于 line-height * font-size .当然，如果我们保持对齐基线， scrollHeight由于顶部溢出会有所不同。