常见浏览器兼容性问题及解决方案
因为不同浏览器的内核不同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js引擎
所以浏览器兼容性问题一般指：css兼容、js兼容
| 五大浏览器 | 内核 |
|---|---|
| Chrome谷歌 | 之前用 Webkit，现已改用 Blink 内核 |
| FireFox火狐 | Gecko (给口) |
| Safari苹果 | Webkit (歪脖 卡特) |
| IE | Trident (踹扽特)) |
| Opera欧朋 | 现已改用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时，IE会出现双倍margin的问题
解决方案：在这个div里面加上display:inline;
4.设置较小高度标签（一般小于10px），在IE6，IE7，页面中高度超出了自己设置的高度
解决方案：
- 给超出高度的标签设置overflow:hidden;
- 或者设置行高line-height 小于你设置的高度。
5.行内属性标签，设置display:block后采用float布局，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:left;属性。
***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); (add 易文特 历史呢)
***2. event事件对象问题
document.onclick=function(ev){
//兼容写法；
var e=ev||window.event;
//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’];
(get 康姆破腾特 失态哦)
跨浏览器兼容解决方法：
// 获取元素属性值的兼容写法
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.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
(施陶普 普瑞普给沈)
}else{
e.cancelBubble=true;//IE....
（看事 巴伯）
}
}
***6.阻止事件默认行为：
//js阻止默认事件 一般阻止a链接href，form表单submit提交
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
(普瑞温特 地方特)
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
}
***7.ajax兼容问题
IE： ActiveXObject (爱课题v 爱克斯 哦毕节科特)
其他： xmlHttpRequest (X M L http 瑞快事特)
在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.连接服务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但
// 但服务器那端是不解析这个时间的
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("失败");
}
}
};
};
};