拷贝别人的，留着方便自己
先看看简单的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>offsetHeight</title>
<style type="text/css">
body{margin:0;}
div{font-size:12px;line-height:14px;}
</style>
</head>
<body>
<div onclick="alert(this.offsetHeight);" style="border:1px solid red;">
这是一行高度
</div>
</body>
</html>
1.在火狐3里面，的到的是16px，
解释下，div里面套着文字，实际中这样考虑，产生一个匿名盒子里面放置文本
"这是一行高度",由于行高为14px;那么这个匿名盒子高度为14px;所以最终的
offsetHeight=14px+1px*2(边框)=16px;
同样ie6里面也得到了16px
2,但是我把line-height设置为小于14px（0--14px)那么火狐都能够正确得到数值
都是offsetHeight=行高确定的盒子高度+上下边框宽度
但是ie6里面却始终等于16px不知道是不是个bug?
有趣的是如果字体大小11px,而行高12px那么ie6得到个15px不知道什么意思，字体小于10得到的是14px
火狐都很正常
2.我们做如下改动：
div{font-size:12px;line-height:16px;}
style="padding:6px;border:5px solid red;"
最后火狐和ie都得到
offsetHeight=paddingTB(上下)+内容高度+上不边框=12+16+10=38
但是如果行高改为12px
那么火狐offsetHeight=12px+10px+12px=34px正确
ie6 offsetHeight=36px;奇怪不合常理 ，bug?
而且这个问题我测试如果文字是多行的话没有。
但是，offsetHeight是不包含margin的。
3.但是如果制定height呢
div{font-size:12px;line-height:12px;height:50px;}
style="padding:6px;border:5px solid red;"
火狐里和IE是offsetHeight=height+paddingTB+borderTB=50px+12+10=72正确
但是，如果height<line-height呢
比如高为4px那么火狐里还是加高度4px就是4+12+10=26正确，但是
ie里面还是由于行高把匿名盒子撑开，所以匿名盒子高度是行高大小就是12所以
ie里面是12+12+10=34px看着也合理。
细想想是溢出的问题了，所以对overflow做处理，应该ie撑开了默认，我们可以用overflow隐藏来看看：
加上overflow:hidden;ie和火狐都得到正确结构了，
所以这里的问题是溢出的处理。
最终标准：
offsetHeight=paddingTB+contentHeight+borderTB
于是ie6存在一个未指定height时的单行文本返回offsetHeight的bug?
分享到：
相关推荐
clientHeight offsetHeight scrollHeight clientWidth详解
在使用IE中，特别在目前div+css的方式，往往不定义div的高度，这是在添加div内容后，需要获取div的高度时，往往需要用到offsetHeight。在使用中，有时会碰到offsetHeight获取到为0的现象，但如果你用各种JS调试工具...
javascript中entHeight、offsetHeight 和scrollHeight的区别
在网上搜了一下，结论非常笼统，讲IE从不讲版本，因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的，没有测试quirk模式。 clientHeight ...offsetHeight在IE6，IE7，IE8以及最新的的FF, Chr
NULL 博文链接：https://love2java.iteye.com/blog/403776
火狐在需要获取div的高度时，往往需要用到offsetHeight，有时会碰到offsetHeight获取到为0的现象， 在使用IE或者火狐中，特别在目前div+css的方式，往往不定义div的高度，这是在添加div内容后，需要获取div的高度时...
此图片更加直观的显示了offsetHeight以及scrollHeight等的用法
clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.
以上主要指IE之中，FireFox差异如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + ...
在本文中，我们讨论了如何解决 JavaScript Option onclick 事件在 IE 浏览器中的问题，并实现了兼容 IE 和 Firefox 浏览器的解决方案。通过使用 JavaScript 事件模型和事件监听器，我们可以正确地捕捉 Option 元素的...
例如，IE、Opera 认为 offsetHeight 是包括边框和padding 的高度，而 NS、FF 认为是可视区域的高度。因此，在编写 JavaScript 代码时需要考虑这些差异。 理解 top、clientTop、scrollTop、offsetTop 等属性是非常...
滚动滚动条 相应的值自动改变 对scrollTop scrollHeight offsetHeight不了解的 快下下来 学习吧 打开html一看 你就知道什么意思了 还能看源码 滚动滚动条 相应的值自动改变
网页可见区域宽： document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document....
本文实例讲述了JavaScript实现兼容IE6的收起折叠与展开效果。分享给大家供大家参考，具体如下： 收起折叠效果本身不难，但是div是否超出高度不应该利用innerHTML去判断，收起折叠的时候把所有div的innerHTML搞到一个...
例如，在 Firefox 浏览器中，需要使用 `contentDocument.body.offsetHeight` 来获取 iframe 的内容高度，而在 IE 浏览器中，需要使用 `Document.body.scrollHeight`。而在 Opera 浏览器中，需要使用 `contentWindow....
IE中，浏览器显示窗口大小只能以下获取： 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小： 代码如下复制代码 ...
document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); }
大厂前端面试题目|# 前端基础知识 ...本章将通过多个面试题，讲解前端常考的基础知识面试题，同时复习一些重要的知识点。 ## 为何要考察 扎实的前端基础知识，是作为前端工程师的根本。基础知识能保证最基本的使用，...