浏览器兼容问题

摘要：一什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。条件注释最初于微软的浏览器中出现，并且直至均支持。

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是我们web前端开发人员经常会碰到和必须要解决的问题.

概括的来说，浏览器兼容指的是同一份代码在不同的浏览器显示效果是不同的。
浏览器的兼容性大体分为样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面。

一些概念：

Css样式在各浏览器中解析不一致的情况，或者说Css样式在浏览器中不能正确显示的问题称为CSS Bug

CSS中，hack是指一种兼容css在不同浏览器中正确显示的技巧方法，因为他们都属于个人对css代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch（补丁）来描述这种行为。

它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，filter是一种用来过滤不同浏览器的hack类型。

那么，

不同的原因是什么？(不支持的属性? bug？)

如何让它展示正常?(条件注释？ 多带带Hack？)

首先，让我们简单了解一下，三种兼容性的不同：

1.因为历史原因，不同的浏览器样式存在差异，可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css，例如通过通配符选择器，全局重置样式

  { margin: 0; padding: 0; }

2.在CSS3还没有成为真正的标准时，浏览器厂商就开始支持这些属性的使用了。CSS3样式语法还存在波动时，浏览器厂商提供了针对浏览器的前缀，直到现在还是有部分的属性需要加上浏览器前缀。在开发过程中我们一般通过IDE开发插件、css 预处理器以及前端自动化构建工程帮我们处理。

浏览器内核与前缀的对应关系如下

3.在还原设计稿的时候我们常常会需要用到透明属性，所以解决 IE9 以下浏览器不能使用 opacit。

 opacity: 0.5;
 filter: alpha(opacity = 50); //IE6-IE8我们习惯使用filter滤镜属性来进行实现
 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)

1.事件兼容的问题，我们通常需要会封装一个适配器的方法，过滤事件句柄绑定、移除、冒泡阻止以及默认事件行为处理

 var  helper = {}

 //绑定事件
 helper.on = function(target, type, handler) {
     if(target.addEventListener) {
         target.addEventListener(type, handler, false);
     } else {
         target.attachEvent("on" + type,
             function(event) {
                 return handler.call(target, event);
             }, false);
     }
 };

 //取消事件监听
 helper.remove = function(target, type, handler) {
     if(target.removeEventListener) {
         target.removeEventListener(type, handler);
     } else {
         target.detachEvent("on" + type,
         function(event) {
             return handler.call(target, event);
         }, true);
     }
 };

2.new Date()构造函数使用，"2018-07-05"是无法被各个浏览器中，使用new Date(str)来正确生成日期对象的。 正确的用法是"2018/07/05".

3.获取 scrollTop 通过 document.documentElement.scrollTop 兼容非chrome浏览器

 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

解决浏览器兼容的主要方法是css hack 那么到底什么是css hack呢？

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

1.快速判断 IE 浏览器版本

2.判断是否是 Safari 浏览器

 /* Safari */
 var isSafari = /a/.__proto__=="//";

3.判断是否是 Chrome 浏览器

 /* Chrome */
 var isChrome = Boolean(window.chrome);

同一产品，版本越老， bug 越多

同一产品，版本越新，功能越多

不同产品，不同标准，不同实现方式

浏览器市场份额

常查CSS属性是否兼容时

常查 Hack 的写法

1、要不要做产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）成本的角度 (有无必要做某件事)

2、做到什么程度让哪些浏览器支持哪些效果

3、如何做根据兼容需求选择技术框架/库(jquery的版本)根据兼容需求选择兼容工具（htmlshiv.js、respond.js、css reset、normalize.css、modernizr）postcss

4、渐进增强和优雅降级渐进增强(progressive enhancement):
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

1、合适的框架Bootstrap (>=ie8)；jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)；Vue (>= ie9)...

2、条件注释

即IE条件注释是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。条件注释 (conditional comment) 是于 HTML 源码中被IE有条件解释的语句。条件注释可被用来向 IE 提供及隐藏代码。条件注释最初于微软的 Internet Explorer 5 浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于 IE10 停止支持。

if（如果是）非IE浏览器，else（那么）我的页面上该 标签会生效，
弹出一个1；如果在IE浏览器上，这段本身是有效的，即能控制该效果，所以在其他浏览器这段则会被注释掉。

*3、CSS hack
（1）定义：由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。

（2）常见hack写法利用该方法去检测浏览器兼容问题

.box{
  color: red;
  _color: blue; /*针对后期检查将ie6和其他浏览器区别开来的标准*/
  *color: pink; /*同上，ie6、7*/
  color: yellow9;  /*ie/edge 6-8*/
}

以上属性均是采用样式覆盖形式，去相应地在所在浏览器属性生效

（3）常见兼容处理范例

例子A：

.target{
  display: inline-block;
  *display: inline;/*在IE6、7中会生效，产生类似bfc的效果，可添加宽高，
与其他浏览器所使用的display: inline-block;有相同效果*/
  *zoom: 1;
}

例子B：

.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效 */
}

例子C：

.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效 */
}

例子D：

例子E：

]-->

（4）常见属性的兼容情况：多使用 https://caniuse.com/

inline-block: >=ie8

inline-block: >=ie8

inline-block: >=ie8

inline-block: >=ie8

inline-block: >=ie8

inline-block: >=ie8

圆角: >= ie9

圆角: >= ie9

圆角: >= ie9

常见的浏览器兼容性可分为三类：

HTML兼容

CSS兼容

JavaScript兼容

viewport

.el {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

方法：可以用html5的oninput事件去代替keyup

input,textarea {
  border: 0;
  -webkit-appearance: none;
}

input:-ms-clear{display:none;}

flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，但是ios系统支持换行属性，这个时候如何解决呢？当然是不使用换行，用其他方式代替。

.box{
    display: -webkit-box; 
    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

$(function () {
    //获取浏览器的userAgent,并转化为小写
    var ua = navigator.userAgent.toLowerCase();
    //判断是否是苹果手机，是则是true
    var isIos = (ua.indexOf("iphone") != -1) || (ua.indexOf("ipad") != -1);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

document.addEventListener("touchstart",function() {
  document.getElementsByTagName("audio")[0].play();
  document.getElementsByTagName("audio")[0].pause();
});

这个目前没有好的办法解决
情景一：页面有视频，点击页面按钮显示弹出层（比如让用户输入用户信息），这时候视频会出现在弹出层上面，是不是很-d疼？
方案：点击按钮时候把video隐藏hide，关闭弹出层show，过程中视频声音还在
情景二：页面很长，往下翻滚时，视频在播放，脱离文档流
方案：页面滚动到某一合适位置把video隐藏hide，回滚到某一位置show，过程中视频声音还在

this.value = this.value.replace(/u2006/g,"");

iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。

-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;

原因：浏览器兴起初期，为了判断用户是双击还是单击，就设置了一个时间段300ms，用户单击后300ms后做事件处理，如果在300ms内连续点击，就判断为双击，做双击处理事件。
所以现在用click绑定事件呢，就会有300ms延迟的问题。
300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。
推荐两个js，一个是fastclick，一个是tap.js

解决 ie9 以下浏览器对 html5 新增标签不识别的问题
html5shiv.js

解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。
respond.js

高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这点主要体现在html5的新标签上

htmlshim框架可以让低于IE9的浏览器支持html5

img的alt属性，在图片不存在的情况下，各浏览器的解析不一致

在chrome下显示的是一张破损的图片，在ff下显示的是alt的文字，而在IE中显示的是破损的图片加文字

ul标签内外边距问题

ul标签在IE6IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距

    

    
文字
    
文字
    
文字
    

IE的打印结果，有3个子节点，并且都为P元素；非IE则表现出极大的差异：居然打印出了7个子节点，当然也包括3个P元素子节点在内，除此之外还多了4个nodeType=3的子节点
改写为：

    
文字
文字
文字

1、图片间隙

A)div中的图片间隙(该bug出现在IE6及更低版本中)
描述：在div中插入图片时，图片会将div下方撑大三像素。
hack1:将

与写在一行上；
hack2:将转为块状元素，给添加声明：display:block;

B)dt,li中图片间隙（IE6）
hack:添加声明：display:block;
overflow:hidden;

2、 默认高度（IE6）

描述：在IE6及以下版本中，部分块元素拥有默认高度（低于18px~22px高度）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;

3、双倍浮向（双倍边距）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界加倍显示。
hack:给浮动元素添加声明：display:inline;

4 、 百分比bug
描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。
hack:给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。
clear 清除浮动
clear:left;清除左浮动
clear:right;清除右浮动
clear:both 清除两边浮动

5、表单元素行高不一致(IE,MOZ,C,O,S)
描述：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;

6、按钮元素默认大小不一
描述：各浏览器中按钮元素大小不一致
hack：统一大小
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框 和背景色去掉。
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。
浏览器解析按钮边框时，会把边框解析在按钮内部，不会影响按钮的原有大小

7)透明属性
IE浏览器写法：filter:alpha(opacity=value);
兼容其他浏览器写法：opacity:.value;(value的取值范围0-9)

在IE6及更低版本的浏览器里，如果想去掉input的默认边框，需将其border属性值设置成0方可兼容多个浏览器。

bug:子元素没设置任何浮动，设置了margin-top属性后，会错误的把margin-top的属性值添加给父元素.（块元素）
hack1:给父元素添加overflow:hidden；声明。
如果父元素设置了浮动属性也不会出现这个问题。

在属性前可加以上这三个符号
_ 只有IE6以下支持,例如_height:100px;

只有IE7以下支持,例如*height:100px;

+只有IE7以下支持,例如+height:100px;
针对IE8加属性值后缀0（数字零）,例如：height:200px0;

！important优先级声明，只有高版本支持，IE6不支持

main{height:60px!important;} 

解决方法：
例如：

 main{height:60px!important;height:70px;} 

注：同时设两个高度，优先级声明的属性要放到前面。

（四）JavaScript 兼容性 1、浏览器的宽高问题

var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽
    var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽
    //以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框

var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高

var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高
var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离

var screenH=window.screen.height;//屏幕分辨率的高
var screenW=window.screen.width;//屏幕分辨率的宽
var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标（除了FireFox）
var screenXX=window.screenX;//FireFox相对于屏幕的X坐标
var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标（除了FireFox）
var screenYY=window.screenY;//FireFox相对于屏幕的y坐标

2、event事件问题

/event事件问题
    document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
        var e=ev;
        console.log(e);
    }
    document.onclick=function(){//谷歌和IE支持，火狐不支持；
        var e=event;
        console.log(e);
    }
    document.onclick=function(ev){//兼容写法；
        var e=ev||window.event;
        var mouseX=e.clientX;//鼠标X轴的坐标
        var mouseY=e.clientY;//鼠标Y轴的坐标
    }

3、DOM节点相关的问题

 function nextnode(obj){//获取下一个兄弟节点
        if (obj.nextElementSibling) {
            return obj.nextElementSibling;
        } else{
            return obj.nextSibling;
        };
    }
    function prenode(obj){//获取上一个兄弟节点
        if (obj.previousElementSibling) {
            return obj.previousElementSibling;
        } else{
            return obj.previousSibling;
        };
    }
    function firstnode(obj){//获取第一个子节点
        if (obj.firstElementChild) {
            return obj.firstElementChild;//非IE678支持
        } else{
            return obj.firstChild;//IE678支持
        };
    }
    function lastnode(obj){//获取最后一个子节点
        if (obj.lastElementChild) {
            return obj.lastElementChild;//非IE678支持
        } else{
            return obj.lastChild;//IE678支持
        };
    }

4、document.getElementsByClassName问题

//通过类名获取元素
    document.getElementsByClassName("");//IE 6 7 8不支持；

    //这里可以定义一个函数来解决兼容问题，当然别在这给我提jQuery...
    //第一个为全局获取类名，第二个为局部获取类名
    function byClass1(oClass){//全局获取，oClass为你想要查找的类名，没有“.”
        var tags=document.all?document.all:document.getElementsByTagName("*");
        var arr=[];
        for (var i = 0; i < tags.length; i++) {
            var reg=new RegExp(""+oClass+"","g");
            if (reg.test(tags[i].className)) {
                arr.push(tags[i]);
            };
        };
        return arr;//注意返回的也是数组，包含你传入的class所有元素；
    }

    function byClass2(parentID,oClass){//局部获取类名，parentID为你传入的父级ID
        var parent=document.getElementById(parentID);
        var tags=parent.all?parent.all:parent.getElementsByTagName("*");
        var arr=[];
        for (var i = 0; i < tags.length; i++) {
        var reg=new RegExp(""+oClass+"","g");
            if (reg.test(tags[i].className)) {
                arr.push(tags[i]);
            };
        };
        return arr;//注意返回的也是数组，包含你传入的class所有元素；
     }

5、获取元素的非行间样式值

//获取元素的非行间样式值
     function getStyle(object,oCss) {
             if (object.currentStyle) {
                 return object.currentStyle[oCss];//IE
             }else{
                 return getComputedStyle(object,null)[oCss];//除了IE
             }
     }

6、设置监听事件

 function addEvent(obj,type,fn){//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false
        if (obj.addEventListener) {
            obj.addEventListener(type,fn,false);//非IE
        } else{
            obj.attachEvent("on"+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了
        };
    }
    function removeEvent(obj,type,fn){//删除事件监听
        if (obj.removeEventListener) {
            obj.removeEventListener(type,fn,false);//非IE
        } else{
            obj.detachEvent("on"+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了
        };
    }

7、元素到浏览器边缘的距离

 function offsetTL(obj){//获取元素内容距离浏览器边框的距离（含边框）
        var ofL=0,ofT=0;
        while(obj){
            ofL+=obj.offsetLeft+obj.clientLeft;
            ofT+=obj.offsetTop+obj.clientTop;
            obj=obj.offsetParent;
        }
        return{left:ofL,top:ofT};
    }

8、阻止默认事件

//js阻止默认事件
    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C标准
        }else{
            e.returnValue="false";//IE..
        }
    }

9、关于EVENT事件中的target

//关于event事件中的target
    document.onmouseover=function(e){
        var e=e||window.event;
        var Target=e.target||e.srcElement;//获取target的兼容写法，后面的为IE
        var from=e.relatedTarget||e.formElement;//鼠标来的地方，同样后面的为IE...
        var to=e.relatedTarget||e.toElement;//鼠标去的地方
    }

10、鼠标滚轮滚动事件

//鼠标滚轮事件
    //火狐中的滚轮事件
    document.addEventListener("DOMMouseScroll",function(event){
        alert(event.detail);//若前滚的话为 -3，后滚的话为 3
    },false)
    //非火狐中的滚轮事件
    document.onmousewheel=function(event){
        alert(event.detail);//前滚：120，后滚：-120
    }

完结

• 上一篇：从底层看JS执行机制
• 下一篇：重复操作算法（JavaScript）