什么是浏览器的兼容性

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。

浏览器的兼容性无非还是样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面

样式兼容性(css)

normalize.css

1.图片间隙

div中的图片间隙 bug：在块元素中插入图片时，有时图片会将块元素下方撑大三像素。 Hack：给<img>添加声明：display:block

2.表单元素行高不一致(IE,MOZ,C,O,S)

bug：表单元素行高对齐方式不一致 hack：给表单元素添加声明：float:left;

3.按钮元素默认大小及样式不一致

hack1： 统一大小及样式（用a标记模拟） hack2：如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

4.鼠标指针bug

描述：cursor属性的hand属性值只有IE8浏览器识别; hack：如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;

5.透明属性

IE浏览器写法：filter:alpha(opacity=数值);取值范围 1-100(IE8以下) 兼容其他浏览器写法：opacity:数值;(数值的取值范围0-1,0.1,0.2,0.3-----0.9)

6.父元素里有块元素，如果给子元素添加添加margin-top,父元素会“掉”下来（高度塌陷）

hack1：给父元素添加overflow：hidden； hack2：给子元素添加float； hack3：给父元素加边框； 或者用其他的方法达到我们想要的效果：如给父元素加padding-top

7.双倍浮向（双倍边距）

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

8.当li里的A加display:block或float:left时，出现行高不一致，有的会多出3像素

hack1：给a加display：inline-block; hack2：给a加display：inline; hack3：给li加float，再加宽度

9.万能清除浮动法

父元素选择符:after{content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden;}

10.行内块元素之间空白缝隙的问题

hack1：利用margin 负值，例如Margin-left:-8px; hack2：把行内块写到一行上去 hack3：给父盒子加:font-size:0;

交互兼容性

1、event事件

通用方式 document.onclick=function(e){ var e = e || window.event; //兼容写法 }

2、一些“方法”的兼容性写法

停止事件传播 if(evt.stopPropagation){ return evt.stopPropagation(); //一定不能漏下evt 方法前一定要写明对象 }else{ return evt.cancelbuble(); } 阻止默认事件 if (e.preventDefault) { e.preventDefault(); //W3C标准 }else{ e.returnValue = 'false'; //IE } 获取第一个子节点（next，last都类似） if (obj.lastElementChild) { return obj.firstElementChild; //非IE6/7/8支持 } else{ return obj.firstChild; //IE6/7/8支持 }; 设置监听事件 //参数一：对象 //参数二：事件类型 //参数三：事件处理函数 function addEvent(obj, type, fn){ if (obj.addEventListener) { obj.addEventListener(type, fn, false); //非IE } else{ obj.attachEvent('on' + type, fn); //IE } }

3、通过className获取DOM节点

function getClassName(xxx){ var atag = document.all ? document.all : document.getElementsByTagName('*'); var arr = []; for (var i = 0; i < atag.length; i++) { var reg = new RegExp('\\b' + xxx + '\\b', 'g'); if (reg.test(atag[i].className)) { arr.push(atag[i]); } } return arr; //返回的也是数组，包含传入的class所有元素； }

4、event.srcElement问题

IE：event对象有srcElement属性，没有target属性； Firefox:even对象有target属性，没有srcElement属性。 srcObj = event.srcElement ? event.srcElement : event.target;

5、firefox与IE的父元素(parentElement)的区别

IE：obj.parentElement firefox：obj.parentNode hack：都使用obj.parentNode

移动端常见案例

1、部分情况下对非可点击元素如(label,span)监听click事件时，ios下不会触发

hack：css中增加cursor:pointer

2、底部输入框被键盘遮挡问题

var oheight = $(document).height(); //浏览器当前的高度 $(window).resize(function(){ if($(document).height() < oheight){ $("#footer").css("position", "static"); }else{ $("#footer").css("position", "absolute"); } });

3、CSS动画页面闪白,动画卡顿

//使用综合属性 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

4、阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

5、预加载、自动播放无效

自动播放的有效性受操作系统、浏览器（webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，所以可以在用户依次输入后，让音频实现预加载:

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

6、ios safari时间显示问题

设置new Date日期格式的时候，在ios中的safari中发现显示效果与其他浏览器不一致。 只识别：new Date("year/month/day");

7、移动端300ms延迟。

hack1：一般在移动端用tap事件来取代click事件 hack2：fastclick可以解决在手机上点击事件的300ms延迟

8、手机上的flex布局时会有兼容性问题

.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+

浏览器hack

1、Firefox

@-moz-document url-prefix() { .selector { property: value; } }

上面是仅仅被Firefox浏览器识别的写法，具体如：

@-moz-document url-prefix() { .demo { color:lime; } }

支持Firefox的还有几种写法：

/* 支持所有firefox版本 */ #selector[id=selector] { property: value; } 或者： @-moz-document url-prefix() { .selector { property: value; } /* 支持所有Gecko内核的浏览器 (包括Firefox) */ *>.selector { property: value; }

2、Webkit枘核浏览器(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } } /*上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器：*/ @media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }

3、Opera浏览器

html:first-child>body Selector {property:value;} /*或者：*/ @media all and (min-width:0) { Selector {property: value;} } /*或者：*/ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body Selector { property: value; } } /*上面则是Opera浏览器的Hack写法：*/ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { background: green; } }

4、IE9浏览器

:root Selector {property: value9;} /*上面是IE9的写法，具体应用如下：*/ :root .demo {color: #ff09;}

5、IE9以及IE9以下版本

Selector {property:value9;} /*这种写法只有IE9以及IE9以下版本能识别，这里需要注意此处“9”只能是“9”不能是别的，比如说“8”，不然会失去效果的，如：*/ .demo {background: lime9;}

6、IE7浏览器

*+html Selector{property:value;} 或 *:first-child+html Selector {property:value;} /*上面两种是IE7浏览器下才能识别，如：*/ *+html .demo {background: green;} 或者： *:first-child+html .demo {background: green;}

7、IE7及IE7以下版本浏览器

Selector {*property: value;} /*上面的写法在IE7以及其以下版本都可以识别，如：*/

.demo {*background: red;} 8、IE6浏览器

加_下划线即可

CSS选择器的Hack写法

下面我们主要来看CSS选择器和CSS属性选择器在不同浏览器的支持情况。下面先来看CSS选择器支持情况。

1、IE6以及IE6以下版本浏览器

* html .demo {color: green;} * ``` 2、仅仅IE7浏览器 ```css *:first-child+html .demo {color: green;}

3、除IE6之外的所有浏览器（IE7-9, Firefox,Safari,Opera）

html>body .demo {color: green;}

4、IE8-9,Firefox,Safari,Opear

html>/**/body .demo {color: green;}

5、IE9+

:root .demo {color: red;}

6、Firefox浏览器

@-moz-document url-prefix() { .demo { color: red; } }

7、Webkit内核浏览器（Safari和Google Chrome）

@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: red; } }

8、Opera浏览器

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { color: red; } }

9、iPhone / mobile webkit

@media screen and (max-device-width: 480px) { .demo { color: red } }

CSS属性Hack写法

/*1、IE6浏览器*/ .demo {_color: red;} /*2、IE6-7浏览器识别*/ .demo {*color: red;} /*3、所有浏览器除IE6浏览外*/ .demo {color/**/:red;} /*4、IE6-9浏览器*/ .demo {color: red9;} /*5、IE7-8浏览器*/ .demo {color/***/:red9;}

IE条件注释，全部采用选择器Hack的写法。这种写法分两步：

1、创建条件样式表，并在HTML中body里添加相应的class类名：

<!–[if IE6]–><<!–[if IE7]–><!–[if IE8]–><!–[if IE9]–><!–[if !IE]–>

2、接着创建对应的样式

.demo {color: blue;}/*现代浏览器*/ .non-ie .demo {color: red;}/*除IE外浏览器*/ .ie9 .demo {color: yellow;}/*IE9浏览器*/ .ie8 .demo{color: green;}/*IE8浏览器*/ .ie7 .demo {color: orange;}/*IE7浏览器*/ .ie6 .demo {color: lime;}/*IE6浏览器*/ @media all and (min-width: 0px){ .demo {color:black;} /* webkit and opera */ @media screen and (-webkit-min-device-pixel-ratio:0){ .demo{color:#369;}/* webkit */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo{color:#cf6;}/* opera */ @-moz-document url-prefix(){ .demo{color:#963;}/* firefox * /