浏览器内核及兼容问题

浏览器及兼容

1. 五种css浏览器兼容的写法

① * ： ie6,ie7可以识别；
② _和- ： ie6可以识别；
③ !important ：表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性，但不认识!important的优先级；
④ 引擎前缀 -ms- -moz- -o- -webkit-

2. 三种js浏览器兼容性的写法

详见： https://m.jb51.net/article/16319.htm
① IE可以使用parentElement获得父结点，parent.children得到结点的所有孩子结点。Firefox不支持。
解决方法：使用parentNode和parent.childNodes。

② Firefox使用XMLHttpRequest，IE使用ActiveXObject。
解决方法：

if (window.XMLHttpRequest) { 
req = new XMLHttpRequest();
 } 
else if (window.ActiveXObject) {
 req = new ActiveXObject("Microsoft.XMLHTTP");
  }

③ 事件绑定
addEventListener(“click”, function, true)兼容firefox、chrome、safari、opera、IE9+
attachEvent(“onclick”, function) 兼容IE7,8
解决：

function add(obj,event){
          if ( obj.addEventListener) {
          obj.addEventListener(event,fn,fase);
          }
else{ obj.attachEvent("on"+event,fn);}
 }

④ 阻止冒泡
event.stopPropagation() 不兼容IE6-8
event.cancleBubble = true 兼容IE

解决：

function stop(event){
    if (event.stopPropagation) {   event.stopPropagation();}
else{  event.cancleBubble = true;   }   }

3. 浏览器内核

浏览器    	内核	         浏览器引擎前缀
IE浏览器  	Trident	               -ms-
Firefox	    Gecko  	                -moz-
Safari	    Webkit    	           -webkit-
opera       Blink  	                 -o-
Chrome  	Webkit（原）、Blink（现	-webkit-

主要的需要添加浏览器引擎前缀(vendor-prefix)的属性包括：
• @keyframes
• 移动和变换属性(transition-property/duration/timing-function/delay)
• 动画属性 (animation-name/duration/timing-function/delay)
• border-radius
• box-shadow
• backface-visibility
• column属性
• flex属性
• perspective属性
注意:不带前缀的必须放在最后

4. 写一段IE和Firefox下不兼容的代码

捕获事件
FF没有setCapture()、releaseCapture()方法
IE中的解决方法 obj.setCapture(); obj.releaseCapture();
火狐中的解决办法:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
o.setCapture();
}else {
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
}else {
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}