拷贝别人的，留着方便自己
先看看简单的代码:
<!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?
分享到：
相关推荐
在网页开发过程中，HTML元素的渲染和交互在不同的浏览器间可能存在差异，尤其是Internet Explorer (IE)和Firefox (FF)之间。这些差异主要源于浏览器对HTML、CSS和JavaScript标准的实现不同。以下是一些常见的问题及...
在IE和Opera中，`offsetHeight` 包括滚动条和边框的尺寸；而在NS和FF中，`offsetHeight` 可能会小于 `clientHeight`，仅反映内容的实际高度。 ### 3. `scrollHeight` 和 `scrollWidth` `scrollHeight` 和 `...
- IE中的style.posLeft和style.posTop在FF中不可用。通用做法是使用object.offsetLeft和object.offsetTop。 6. **窗口尺寸**： - IE使用document.body.offsetWidth和document.body.offsetHeight，FF使用window....
在IE6和7中，`transform`属性不被支持，但我们可以使用`expression`来实现类似的效果： ```css .container img { position: absolute; top: expression((this.offsetHeight - parent.offsetHeight) / 2 + 'px'); ...
在本示例中，"js新闻上下滚动效果（兼容IE和ff）"指的是利用JavaScript实现一个新闻标题在网页上进行上下滚动的效果，这种效果常见于新闻网站，能够展示多条新闻，同时保持页面空间的有效利用。这个效果不仅在现代...
在处理浏览器兼容性问题时，尤其是在处理事件监听器（如`onmousemove`）时，IE 和 Firefox 在事件对象的获取上存在明显差异。 - **IE**: 使用 `window.event` 获取当前触发事件的对象。 - **Firefox**: 通过传递给...
标题“兼容ie，FF，chrome，opera的弹出层居中js”所指的就是一个JavaScript实现的弹出层（popup layer）定位代码，它能在Internet Explorer（IE）、Firefox（FF）、Chrome以及Opera这些主流浏览器中实现居中显示。...
由于各个浏览器对JavaScript的支持程度和实现方式有所差异，所以需要采取特定的策略来处理这些差异，以确保代码在Internet Explorer（IE）和Mozilla Firefox（FF）等浏览器上都能正常运行。以下是针对IE和FF兼容性...
对于窗体的高度和宽度，IE使用`document.body.offsetWidth`和`document.body.offsetHeight`，但FF提供了`window.innerWidth`和`window.innerHeight`，以及`document.documentElement.clientWidth`和`document....
在IE和Opera中，`offsetHeight` 和 `offsetWidth` 包括了元素的内边距和边框，但不包括滚动条。而在Firefox和Netscape中，这两个属性返回的是元素的实际大小，即使这个大小大于内容区域的大小（即大于`clientHeight`...
在IE和FF中的区别，主要是表现在获取宽度（clientWidth和offsetWidth）和高度（clientHeight和offsetHeight）时的差异。clientWidth和clientHeight属性返回元素的内部宽度和高度，即元素内容区域的宽高，不包括边框...
在获取窗体高度和宽度时，IE使用`document.body.offsetWidth`和`document.body.offsetHeight`，但需要注意，这种方法要求页面必须包含`<body>`标签。Firefox提供了`window.innerWidth`和`window.innerHeight`，以及`...
标题中的“IE FF OPERA都可用的弹出层实现代码”指的是这段JavaScript代码可以在Internet Explorer (IE)、Firefox (FF) 和 Opera 浏览器中实现弹出层的效果。弹出层通常是一种网页设计技术，它允许在用户与页面交互...
在最初的测试中，这个函数在IE和FF上表现良好，但在Opera上遇到了问题。原因是Opera浏览器在处理`iframe`内容时使用`contentWindow`而不是`contentDocument`。因此，针对Opera的调整是必要的。 改进后的JavaScript...
通过对IE与Firefox在事件处理、元素属性、DOM操作以及CSS样式等方面的不同之处进行详细分析，我们可以发现，尽管这两种浏览器在很多方面都有所差异，但还是存在一些共通的解决方案。对于开发者来说，掌握这些基本的...
例如，IE、Opera 认为 offsetHeight 是包括边框和padding 的高度，而 NS、FF 认为是可视区域的高度。因此，在编写 JavaScript 代码时需要考虑这些差异。 理解 top、clientTop、scrollTop、offsetTop 等属性是非常...
在获取窗体的高度和宽度时，IE使用`document.body.offsetWidth`和`document.body.offsetHeight`，但需要注意的是，这种方法要求页面必须包含`<body>`标签。Firefox提供了`window.innerWidth`和`window.innerHeight`...
例如，IE和Opera认为`offsetHeight`包含滚动条和边框，而NS和FF则认为`offsetHeight`是实际内容高度，可以小于`clientHeight`。`scrollHeight`在所有浏览器中通常被认为是内容的总高度，至少等于`clientHeight`。 ...