拷贝别人的，留着方便自己
先看看简单的代码:
<!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 οnclick="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?
先看看简单的代码:
<!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 οnclick="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?
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
