浏览器的兼容

CSS兼容

css Hack(分辨不同浏览器)

由于不同的浏览器对css的解析不一样因此会造成页面效果不一样，得不到我们所需要的页面效果。所以我们需要针对不同的浏览器去写不同的css，让它能够同时兼容不同的浏览器。
这个针对不同浏览器写不同的CSS code的过程，就是CSS hack。
1.原理
不同浏览器对css的支持和解析结果不一样，以及css中的优先级。
2.区别浏览器

	IE6	IE7	FF
*	√	√	×
!important	×	√	√
-	√	×	×

3.css hack的写法
识别能力强的浏览器的css写在后面
栗子：分辨IE6和FF浏览器

<style>  
div{  
   background:green; /* for firefox */  
   *background:red; /* for IE6 */  
}  
</style> 

css3兼容

不同浏览器对CSS3的兼容不同，为了使用户能有更好的体验CSS3新特性，各主流浏览器都定义了私有属性。
-webkit-：chrome、 Safari的前缀
-moz-：firefox的前缀
-ms-：ie的前缀
-o-：poera的前缀

触发事件对象(IE和标准的兼容)

1.Event对象
event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标的按钮的状态。

IE浏览器和标准(如Firefox)中对event对象的属性的支持有所不同。比如：

• IE下,event对象有srcElement属性,但是没有target属性；
• Firefox下,event对象有target属性,但是没有srcElement属性；

但两者的作用是相当的，会返回触发此事件的元素。

2.兼容写法

Var ev = ev || window.event
Var target = ev.srcElement||ev.target

事件绑定(IE低版本和标准的兼容)

标准浏览器：addEventListener()
IE低版本浏览器：attachEvent()

function addEvent(obj,type,handle){
  try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
    obj.addEventListener(type,handle,false);
  }catch(e){
    try{ // IE8.0及其以下版本
      obj.attachEvent('on' + type,handle);
    }catch(e){ // 早期浏览器
      obj['on' + type] = handle;
    }
 }
}

获取节点位置(html文档和xhtml文档的兼容)

1.Document对象
Document对象是Window对象的一部分，可通过window.document属性进行访问。

2.document.documentElement 和 document.body
在设计页面的时候可能经常会用到固定层的位置，需要获取html对象的坐标来更灵活的设置目标层的坐标，这时候就需要用到document.body.clientWidth等属性。但在XHTML标准网页中取不到正确结果，在XHTML标准网页应该使用document.body.clientWidth来代替

document.documentElement.clientWidth || document.body.clientWidth