先看看简单的代码:
< !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?