先看看简单的代码:
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
<
!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>
< 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?
本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/132166，如需转载请自行联系原作者
