前端css\js浏览器兼容性问题及处理方案

常见的浏览器内核主要有四种：Webkit内核、Presto内核、Trident内核、Gecko内核。

HTML兼容
CSS兼容
JavaScript兼容

1. HTML兼容

对于HTML兼容，这是由于低版本浏览器不能识别一些高版本浏览器使用的标签，从而导致不能解析，比如Html5 新语义标签如header, section, footer, aside, nav, main, article, figure等 IE9及以上全支持。这类兼容性问题比较容易处理。(不使用就可以了)

2. CSS兼容

问题一：不同浏览器的标签默认的外补丁(margin)和内补丁(padding)不同
问题表现：标签在不加样式的情况下外补丁(margin)和内补丁(padding)存在差异
解决方法：在css里添加如下代码

*{
  margin: 0;
  padding: 0;
}

问题二：IE6下margin值双倍边距问题
问题表现：IE6下元素浮动之后margin值变成双倍
解决方法：将元素转为行内属性

{
  display: inline;
}

问题三：height值设置过小问题
问题表现：IE6、IE7下设置标签高度小于10px，存在超出已设置的高度的问题
解决方法：为超出高度的元素添加溢出部分隐藏

{
  overflow: hidden;
}

问题四：标签min-height属性不兼容问题
问题表现：min-height属性本身就是一个不兼容CSS属性，所以min-height不能很好地被各个浏览器兼容
解决方法：例如要为一个标签设置最小高度为200px

{
  min-height: 200px;
  height: auto!important;
  height: 200px;
  overflow: visible;
}

问题五：图片元素img下默认有间距
问题表现：IE6下图片元素img出现多余空白
解决方法：图片使用float属性

问题六：opacity多浏览器透明度兼容问题
问题表现：opacity是css3里的属性，只有部分浏览器支持
解决方法：使用各个浏览器的私有属性以支持opacity

{
  filter: alpha(opacity=50);/*IE*/
  -moz-opacity: 0.5;/*老版Mozilla*/
  -khtml-opacity: 0.5;/*老版Safari*/ 
  opacity: 0.5;
}

问题七：Firefox和Chrome不兼容cursor:hand
解决方法：cursor:poniter兼容所有浏览器

问题八：IE6的3px Bug
问题表现：一个标签浮动，另一个不浮动的元素自然上浮与之靠近出现3px间距
解决方法：对浮动的标签设置_margin-right: -3px;

{
  _margin-right: -3px;
}

问题九：display:inline-block元素之间空隙
问题表现：将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，原因是HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度
解决方法：
（1）标签不换行。
（2）父级标签font-size:0px;

问题十：CSS3 @media 查询支持ie9及以上
解决方法：js辅助判断

问题十一：background-size ie9及以上支持 /现在的浏览器不需要加前缀了/
解决方法：

.parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                border: 1px solid red;
                background: url(img/aaa.jpg) no-repeat center center;
                background-size: 100% 100%;
                /*针对IE8的hack，目的是除掉之前background*/
                background: none\9;
                /*下一行为关键设置*/
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/aaa.jpg', sizingMethod='scale');
            }

问题十二：
transtation属性只支持ie10及以上，所以过渡效果不一定有效

@keyframe 规则和 animation 属性只支持ie10及以上

transform ：
IE10、Firefox、Opera 支持 transform 属性。
IE9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。

问题十三：border-radius 只支持ie9以上

问题十四：rgba 只支持ie9及以上浏览器，ie8要用滤镜处理

3. JavaScript兼容

问题一：event.x与event.y
问题表现：IE下,event对象有x,y属性,但是没有pageX,pageY属性；其它,event对象有pageX,pageY属性,但是没有x,y属性。
解决方法：

eventX = event.x ? event.x : event.pageX

问题二：event.srcElement
问题表现：IE下，even对象有srcElement属性，但是没有target属性
解决方法：

eventTarget = event.srcElement ? event.srcElement : event.target

问题三：获取事件对象

var e = eve || window.event

问题四：获取键盘编码

var e = eve || window.event
var keyValue = e.keyCode || e.charCode || e.which

问题五：阻止事件冒泡

var e = eve || window.event
e.stopPropagation ? e.stopPropagation : e.cancleBubble = true;

问题六：阻止超链接的默认行为

var e = eve || window.event
e.preventDefault ? e.preventDefault() : e.returnValue = false

问题七：添加事件监听

function addEventListener(obj,event,fn,boo){
    if(obj.addEventListener){
       obj.addEventListener(event,fn,boo);
     }else{
　　　　obj.attachEvent("on" + event,fn);
　　}
}
运用: addEventListener(oBtn,"click",fn1,false);

问题八：移除事件监听

function removeEventListener(obj,evt,fn,boo){
   if(obj.removeEventListener){
　　　obj.removeEventListener(evt,fn,boo);
   }else{
　　　obj.detachEvent("on" + evt,fn);
　　}
}
运用：removeEventListener(oBtn,"click",fn2,false);

问题九：获取鼠标键值的 event.button

function getbutton（eve）{
　var e = eve || window.event;
　if(eve){//判断是否为标准浏览器
　　return e.button
  }else if(window.event){//判断是不是IE
    switch(e.button){
      case 1 :  return 0;
      case 4 :  return 1;
      case 2 :  return 2;
    }
  }
}

问题十：使用getAttribute获取className



var oBox=document.getElementById("box1")
console.log(oBox.getAttribute("className"))//标准浏览器不支持,ie7支持
console.log(oBox.getAttribute("class")//标准浏览器支持，ie7不支持

兼容写法：
function fn(obj){
  if(obj.getAttribute("class"))==null{
    return obj.getAttribute("className");
  }else{
 　return obj.getAttribute("class")
  }
}

问题十一：getElementsByClassName("class属性名称")不兼容

console.log(obj.getElementsByClassName("class属性名称"))//标准浏览器支持，ie8以下不支持

兼容写法：
function fn(obj.class属性名称){
   if(obj.getElementsByClassName){
      return obj.getElementsByClassName(className);
   }else{
      var list = [];
      var arr = obj.getElementsByTagName(*)//上一步是获取页面所有的标签元素
      for(var i = 0;i < arr.length;i ++){
        if(arr[i].className == className){
          list.push(arr[i]);
        }
      }
      return list;
   }
}
遍历所有元素，找出class名为指定名字的元素

问题十二：获取非行内样式的兼容

var oBox = document.getElementById("box");
function getStyle(obj,attr){
  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true[attr];
};
var s = getStyle(oBox,"width");

问题十三：localStorage和sessionStorage ie8及以上支持
解决方法：低版本浏览器使用Cookie

问题十四：onselectstart 事件，用来禁用文字选中
webkit浏览器：行内加onselectstart="return false;"
firefox 行内或css加-moz-user-select：none；
标准写法：

123
#arrow {
  -moz-user-select:none;
}

不全不对的地方请大家留言补充修改，谢谢！

前端css\js浏览器兼容性问题及处理方案

1. HTML兼容

2. CSS兼容

3. JavaScript兼容

你可能感兴趣的:(前端css\js浏览器兼容性问题及处理方案)