IE、Firefox、Opera与Netscape浏览器对clientHeight等属性差异及兼容处理

浏览器对clientHeight、offsetHeight和scrollHeight的解释差异

早期Web开发中主要涉及的四种浏览器包括IE（Internet Explorer）、NS（Netscape）、Opera以及FF（FireFox）。

clientHeight

对于clientHeight属性，各浏览器通常没有争议，它代表内容可视区域的高度，即浏览器窗口中可见内容的区域高度。这通常指最后一个工具栏下方至状态栏上方的区域，与页面实际内容无关。

offsetHeight

在IE和Opera浏览器中，offsetHeight的计算方式为：clientHeight加上滚动条宽度和边框宽度。

而在Netscape（NS）和Firefox（FF）浏览器中，offsetHeight表示网页内容的实际高度，该值可能小于clientHeight。

scrollHeight

IE和Opera认为scrollHeight是网页内容的实际高度，因此该值可能小于clientHeight。

NS和FF则认为scrollHeight代表网页内容高度，但其最小值被限制为clientHeight。

简单地说

clientHeight指的是透过浏览器窗口看到的可视区域高度。

在NS和FF中，offsetHeight和scrollHeight均表示网页内容高度。区别在于，当网页内容高度小于或等于clientHeight时，scrollHeight的值固定为clientHeight，而offsetHeight则可以小于clientHeight。

IE和Opera中，offsetHeight等于可视区域clientHeight加上滚动条和边框；scrollHeight则是网页内容的实际高度。

同理

clientWidth、offsetWidth和scrollWidth的解释逻辑与上述高度属性相同，只是将高度概念替换为宽度概念。

但是

Firefox在不同DOCTYPE声明下对clientHeight的解释存在差异。例如在XHTML 1 Transitional中，其表现与前述解释不同。其他浏览器则不存在此类问题。

JS获取clientHeight与scrollTop的兼容方法

首先查看下表数据，该表值为document.body.clientHeight与document.documentElement.clientHeight的比值或具体数值。

IE FF

Html 608/0 630/11096

Xhtml 10942/591 11076/630

在HTML/XHTML与IE/FF这4种排列组合下，获取的clientHeight值几乎都不一致，这表明编写一段能兼容3种浏览器和两种页面标准的JavaScript脚本极具挑战性。

目前总结出的判断方法如下：

var h1 = document.body.clientHeight;

var h2 = document.documentElement.clientHeight;

var isXhtml = (h2<=h1&&h2!=0)?true:false; //判断当前页面的Doctype是否为Xhtml

var body = isXhtml?document.documentElement:document.body;

alert(body.clientHeight); //最终结果比较一致

安全的取到scrollTop：

document.body.scrollTop + document.documentElement.scrollTop

判断浏览器的类型，这种写法挺喜欢的：

var ua = navigator.userAgent.toLowerCase ();

var os = new Object();

os.isFirefox = ua.indexOf ("gecko") != -1;

os.isOpera = ua.indexOf ("opera") != -1;

os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;

JS获取Flash对象的方法汇总

IE, FF, Maxthon用document.getElementById(id)

Opera用 document.embeds(id)

var isOpera=(window.opera&&navigator.userAgent.match(/opera/gi))?true:false;

if(isOpera){

var oswf = document.embeds('ad_flipper_swf');

}else{

var oswf = document.getElementById('ad_flipper_swf');

JS代码执行顺序规则

1.同级的不同的代码块，代码块间的执行顺序为从上到下；

2.在代码中嵌入代码的情况下，先执行上层代码块，再执行子代码块；代码中嵌入代码

是指一个文件引入另一个文件，而不是指所有的通过document.write形式打出的代码。