浏览器内核及兼容问题

浏览器及兼容

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);
}

你可能感兴趣的:(笔试面试总结,浏览器)