首页 > 代码库 > chrome-Firefox-IE浏览器兼容总结

chrome-Firefox-IE浏览器兼容总结

作为一名WEB前端程序员,相信每个人对浏览器的兼容都"情有独钟",下面就一些常用的浏览器的兼容列举一二。

一、块级元素(block)一般不转化为inline-block,其实是因为浏览器的兼容问题,IE8以下的浏览器不     支持块级元素转化为行内块元素(可以使用浮动)。

二.获取元素样式:
1.oDiv.style.background:
  获取到的是行内样式的属性
2.获取显示的样式:
  标准浏览器(IE9以下是不支持):
    getComputedStyle(标签元素,false).属性名
  IE9以下获取内联样式:
    标签元素.currentStyle.属性名

  做浏览器的兼容:
  if (oDiv.currentStyle) {
    //在IE9以下
    oDiv.currentStyle.width;
  } else {
    //标准浏览器
    getComputedStyle(oDiv,false).width;
  }

3.oDiv.offset.width=100;注意:不带‘px‘,上面两个获取的带‘px‘

三.获取兄弟节点
  nextSibling,previousSibling
  在高级和IE9以上的浏览器里面,兄弟节点会获取到空格,在IE8以下,才能获取到我们想要的元素节点

  previousElementSibling,nextElementSibling
  在高级和IE9以上的浏览器里面,兄弟节点会获取到对应的元素,在IE8以下,不能获取到我们想要的元素节点

  var oP1 = oP.previousElementSibling || oP.previousSibling;

四.获取第一个或最后的兄弟节点
  获取节点,获取第一个节点,获取最后一个节点
  父节点.firstChild;
  父节点.lastChild;
  1.兼容所有的浏览器
    oUl.firstElementChild || oUl.firstChild
  2.兼容所有的浏览器
    oUl.lastElementChild || oUl.lastChild

五.向上滚动的距离:
  1.在谷歌里面:
    document.body.scrollTop
  2.在火狐、IE里面:
    document.documentElement.scrollTop
  3.兼容所有浏览器:
    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;

六、事件绑定的兼容
  if (obj.addEventListener) {
    //在高级浏览器
    obj.addEventListener(type,fn,false);
  } else {
    obj.attachEvent(‘on‘+type,fn)
  }
  事件移除的兼容
  if (obj.removeEventListener) {
    obj.removeEventListener(type,fn,false);
  } else {
    obj.detachEvent(‘on‘+type,fn);
  }

七、阻止默认事件的兼容
  function(evt) {
    var oEvent = evt || event;
    oEvent.preventDefault && oEvent.preventDefault();
    return false;
  }

八、事件委托兼容
  srcElement: 获取到事件真正作用的那个元素 (不兼容Firefox,专门用来做IE浏览器的兼容)
  target: 获取到事件真正作用的那个元素 (兼容高级浏览器)
  var oLi = oEvent.srcElement || oEvent.target;

  addEvent(‘oUl‘,‘click‘,function(evt){

    var oEvent=evt||event;

    var oLi=oEvent.srcElement||oEvent.target;

  })

chrome-Firefox-IE浏览器兼容总结