常见的浏览器兼容问题解决方案

为什么浏览器会出现兼容问题？

• 因为不同浏览器的内核不同，并且对同一段代码有不同的解析
• 浏览器内核主要分为两种：渲染引擎 | JS引擎
• 所以浏览器兼容问题一般是指：CSS兼容 和 JS兼容

5大主流浏览器

• IE、Firefox、Google Chrome、Safari、Opera

浏览器使用的内核

• IE ： Trident内核
• Chrome ： 以前是Webkit内核，现在是Blink内核
• Firefox ： Gecko内核，俗称Firefox内核
• Safari ： Webkit内核
• Opera ： 最初是Presto内核，后来是Webkit，现在是Blink

常见的兼容性问题

CSS兼容问题

1、不同浏览器的标签默认的margin和padding不同
解决方案：css里增加通配符*{margin:0;padding:0;}

2、 图片加a标签在IE9中会有边框
解决方案：img{border:none;}

3、IE6双边距问题：在IE6及更低版本中设置了float，会出现双边距问题
解决方案：不使用margin，使用padding

4、IE6及更低版本中，部分块元素拥有默认高度
解决方案：给元素设置font-size:0;

5、a标签的蓝色边框 解决方案：a{outline:none;}

6、IE9以下浏览器不能使用opacity
解决方案：

• Firefox/Chrome/Safari/Opera浏览器使用opacity；IE浏览器使用filter

opacity: 0.7; /*FF chrome safari opera*/ 
filter: alpha(opacity:70); /*用了ie滤镜,可以兼容ie*/

7、IE6/7不支持display:inline-block
解决方案：{display: inline-block; *display: inline;}。 或者：display:inline-block; _zoom:1;_display:inline;

8、cursor兼容问题（cursor:hand;只有IE8及以下浏览器识别，其他浏览器不识别）
解决方案： 统一使用cursor:pointer

9、IE6/7中img标签与文字放一起时，line-height失效的问题
解决方案：文字和<img>都设置 float

10、ul标签在Firefox中默认是有padding值的，而在IE中只有margin有值 解决方案：ul{margin: 0;padding: 0;}

11、相邻元素设置margin边距时，margin将取最大值，舍弃小值
解决方案：不让边距重叠，可以给子元素加一个父元素，并设置该父元素设置{overflow: hidden}

12、ul或li浮动后，显示在div外
解决方案：清除浮动；须在ul标签后加<div style="clear:both"></div> 来闭合外层div

13、在Chrome中字体不能小于10px
解决方案：p{font-size: 12px; transform: scale(0.8);}

写法	内核	浏览器
-webkit-	webkit渲染引擎	chrome/safari
-moz-	gecko渲染引擎	Firefox
-ms-	trident渲染引擎	IE
-o-	opeck渲染引擎	Opera

JS兼容问题

1、事件对象的兼容
e = ev || window.event

2、滚动事件的兼容
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

3、 阻止冒泡的兼容
if (e.stopPropagation) { e.stopPropagation; } else { e.cancelBubble=true; }

4、阻止默认行为的兼容
if (e.preventDefault) { e.preventDefault; } else { e.returnValue = false; }

5、添加事件监听器的兼容
if (target.addEventListener){ target.addEventListener("click", fun, false); } else { target.attachEvent("onclick", fun); }