Для некоторых шрифтов, когда line-height
элемента меньше порога, scrollHeight
больше, чем clientHeight
.
Итак, что-то в свойствах шрифта вызывает это, но что это такое и как его можно избежать, предпочтительно используя CSS или даже редактор шрифтов для пользовательских шрифтов?
Например, в этом фрагменте scrollHeight
для Tahoma
больше, чем clientHeight
хотя sans-serif
кажется ОК, когда line-height
равна 1. Это различие увеличивается, когда страница увеличена в Chrome (ctrl+) и происходит даже для sans-serif, Когда высота линии ниже 1 или размер шрифта увеличивается, разница увеличивается.
Для некоторых других шрифтов он поднимается до 5 пикселей на высоте линии 1 и уменьшается, увеличивая высоту линии до 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>