不同浏览器下高度的区别

最新推荐文章于 2021-06-22 11:46:55 发布

O溺水的鱼0

最新推荐文章于 2021-06-22 11:46:55 发布

阅读量2.3k

点赞数

分类专栏： HTML 文章标签：浏览器 safari button scroll html firefox

本文链接：https://blog.csdn.net/wgw335363240/article/details/6251865

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

不同浏览器下高度的区别

一、 Html 页面代码

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE>A Simple Clock</TITLE>

<BODY>

<DIV ID=oDiv STYLE="overflow:auto; width:200px;height:100px;word-wrap:break-word;word-break:break-all;border:1px red solid;font-size:14px;font-family:' 宋体 ';line-height:25px; "> 我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容 </DIV>

<BUTTON οnclick="alert(document.getElementById('oDiv').clientHeight)">client Heighth</BUTTON>

<BUTTON οnclick="alert(document.getElementById('oDiv').offsetHeight)">offset Height</BUTTON>

<BUTTON οnclick="alert(document.getElementById('oDiv').scrollHeight)">scroll Height</BUTTON>

<BUTTON οnclick="alert(document.getElementById('oDiv').scrollTop)">scroll Top</BUTTON>

</BODY>

</HTML>

二、 未加字体行高测试结果

去掉上面html 代码中字体和行高（也就是红色区域）的测试结果：