有没有童鞋遇到过同样的问题：只设置行高的div，为什么scrollHeight大于clientHeight

Question

具体代码如下：这是一段测试文字.test{line-height:23px;font-size:23px;background:#000;color:#fff;}letscrollHeight=document.getElementById('test').scrollHeightconsole.log('scrollHeight',scrollHeight)//"scrollHeight"26letclietHeight=document.getElementById('test').clientHeightconsole.log('clietHeight',clietHeight)//"clietHeight"23

Answer 1

这是因为line-height并不等于height，它只是指行高，而文本内容真正的高度，除了行高，还有一个因素，就是字体，你如果更改font-family到不同的值，你会发现scrollHeight并不一定是26，还有可能是其他的值。
一般这个值的计算公式大约可以用p*font-size来形容，这里的p是不同字体中的一个常量，而且同一字体，在不同浏览器，不同操作系统下，也有细微的差别。