浏览器兼容笔记

document.compatMode

     document的compatMode指示当前文档的盒子模型。有两个值：“BackCompat”和“CSS1Compat”。当文档中用DOCTYPE明确声明了当前文档是XHTML格式时，这个属性将是“CSS1Compat”。否则，是“BackCompat”。

 

    compatMode影响CSS盒子的呈现形式，对在精确的UI定位中需要特别注意。“CSS1Compat”是按符合W3C标准的盒子模型来呈现的。

 

IE的特殊性

    IE的DOM元素属性与Firefox, Opera, Safari有些不同。在IE中，我们可以给DOM添加任意自定义的属性，但却不能用delete操作符删除这个添加的属性，要删除自定义属性必须用DOM元素的removeAttribute方法。

 

    IE中DOM对象的属性与其标签中的属性是相同的。因此，dom.setAttribute("myattr", "yeah") 与 dom.myattr = "yeah" 是完全等效的，也可以这样<... myattr="yeah" ...>直接在标签中写自定属性。

    而Firefox, Opera, Safari中DOM元素的属性与标签特性(Attribute)是两个不同的概念，二者并无直接联系。

 

Opera的特殊性：

     Opera 9.5 及之前版本的function没有caller属性，而IE, Firefox, Safari一直都有。
     Opera 9.6及之后的版本中，function已经支持caller属性！

 

     在对待eval()和window.eval()的问题上，Opera与其他三种浏览器有区别。

     IE, Firefox, Safari似乎并不刻意区分eval()和window.eval()两种写法，他们都是在当前作用域内解析代码的，执行效果一样。

     而Opera中的eval()和window.eval()是有区别的。使用eval()时，是在当前作用域里解释代码的；而使用window.eval()时，是在根作用域里解释代码的。

 

outerHTML

    Firefox的DOM元素没有outerHTML属性，而IE, Opera和Safari都有这一属性。

 

innerText

    IE, Opera和Safari都支持DOM元素的innerText属性，而Firefox不支持着一属性。Firefox中有textContent属性，与其他浏览器的innerText属性类似。

 

textContent

    Firefox, Opera和Safari都支持DOM元素的textContent属性，而IE没有这一属性。在IE中是用innerText属性来操作。Opera和Safari两边倒，既支持innerText也支持textContent。

 

onmouseleave

    onmouseleave事件只有IE的DOM元素才有。

    而onmouseout事件是IE, Firefox, Opera 和 Safari 都有的，因此请使用onmouseout事件，而不要用onmouseleave事件。

 

constructor

    IE的DOM元素没有constructor属性，而Firefox, Chorme, Opera, Safari都有constructor属性。

    对于Firefox的DOM元素，其constructor属性是一个内置对象，其typeof值是'object'。

    对于Chrome的DOM元素，其constructor属性是一个内置函数，其typeof值是'function'。

    对于Opera的DOM元素，其constructor属性是Object()函数，其typeof值是'function'。

    对于Safari的DOM元素，其constructor属性是一个内置对象，其typeof值是'object'。

    值得注意的是，尽管Chrome和Safari都采用了Webkit内核，但其DOM元素的结构还是有些不同的。