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

不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
所以浏览器兼容性问题一般指：css兼容、js兼容

五大浏览器内核Chrome谷歌之前Webkit，已改Blink内核FireFox火狐GeckoSafari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核一、css兼容1. 不同浏览器的标签默认的margin和padding不同

解决方案：

CSS里 *{margin:0;padding:0;} 但是性能不好一般我们会引入reset.css样式重置；2.css3新属性，加浏览器前缀兼容早期浏览器

-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */

3.块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题

问题：常见症状是IE6中后面的一块被顶到下一行。
解决方案：在这个div里面加上display:inline;

4.设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

解决方案：

给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。5.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

解决方案：在display:block;后面加入display:inline;/display:table;

6. IE浏览器div最小宽度和高度不生效的问题

解决方案：

#box{ width: 80px; height: 35px;html body #box{ width: auto; height: auto;  min-width: 80px;  min-height: 35px;

7.超链接访问过后hover样式就不出现的问题

解决技巧是：改变CSS属性的排列顺序: L-V-H-A。

a:link {}a:visited {}a:hover {}a:active {}

8.图片默认有间距

解决方案：使用float属性为img布局(所有图片左浮)

9. css hack解决浏览器兼容性

background-color:yellow0; 0 是留给ie8的 background-color:pink; ie7定了；_background-color:orange; _专门留给神奇的ie6；

二、js兼容1. 事件绑定

IE: dom.attachEvent();
标准浏览器： dom.addEventListener(‘click',function(event){},false);

2. event事件对象问题

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

3.event.srcElement(事件源对象)问题

IE： event对象有srcElement属性，但是没有target属性；
Firefox: event对象有target属性，但是没有srcElement属性。
解决方案：

srcObj = event.srcElement?event.srcElement:event.target;

4.获取元素的非行间样式值：

IE: dom.currentStyle[‘width’] 获取元素高度
标准浏览器： window.getComputedStyle(obj, null)[‘width’];
跨浏览器兼容解决方法：

 // 获取元素属性值的兼容写法 function getStyle(obj,attr){ if(obj.currentStyle){ //兼容IE obj.currentStyle[attr]; return obj.currentStyle[attr]; }else{ //非IE， return window.getComputedStyle(obj, null)[attr]; 

5.阻止事件冒泡传播：

//js阻止事件传播，这里使用click事件为例 document. unction(e){ var e=e||window.event; if (e.stopPropagation) { e.stopPropagation();//W3C标准 }else{ e.cancelBubble=true;//IE....

6.阻止事件默认行为：

//js阻止默认事件 一般阻止a链接href，form表单submit提交 document. unction(e){ var e=e||window.event; if (e.preventDefault) { e.preventDefault();//W3C标准 }else{ e.returnValue='false';//IE..

7.ajax兼容问题

IE： ActiveXObject
其他： xmlHttpReuest

在IE6以前不是用XMLHttpRequest创建的，所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()

跨浏览器兼容解决方法：

window.onload = function(){var oBtn = document.getElementById('btn');oBtn.onclick = function(){//1.创建ajax对象//只支持非IE6浏览器var oAjax = null;if(window.XMLHttpRequest){oAjax = new XMLHttpRequest();//alert(new XMLHttpRequest());}else{//只支持IE6浏览器oAjax = new ActiveXObject("Microsoft.XMLHTTP");//2.连接服(xl码适合多高体重多重的人？男士XL码适合人群∶身高范围:175-180cm;体重范围:65-75公斤;如果是标准身材，建议身高175cm，体重70公斤的人穿比较合身。女士XL码适合人群∶身高范围:164-167cm 体重范围:56-62公斤;如果是标准身材，建议身高165cm，体重55公斤的人穿比较合身。)务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但//但服务器那端是不解析这个时间的oAjax.open("get","a.txt?t=" new Date().getTime(),true);//3.发送oAjax.send(null);//4.接受信息oAjax.onreadystatechange = function(){//浏览器与服务器之间的交互,进行到哪一步了,当等于4的时候,代表读取完成了if(oAjax.readyState==4){//状态码,只有等于200,代表接受完成,并且成功了if(oAjax.status==200){alert("成功" oAjax.responseText);}else{alert("失败");

来源：