浏览器兼容性问题是我们前端开发不可避免会遇到的一个难题。由于每个浏览器内核、版本、运行平台等等的差异，我们经常会看到类似normal，reset这样的文件引入，目的是为了初始化样式，也是为了兼容各大浏览器，而浏览器的兼容主要分为三种：
- CSS兼容
- JavaScript兼容
- HTML兼容
一、CSS兼容
而在这些兼容中，其实最主要需要考虑的就是IE浏览器的兼容性。
IE兼容性问题
1、块状元素float后，有添加了横向的margin，在IE6下比设置的值要大（属于双倍浮动的bug）
解决方案：给float标签添加display：inline，将其转换为行内元素
2、设置较小高度的容器（小于10px），在IE6下不识别小于10px的高度；
解决方案：给容器添加overflow：hidden；
3、min-height在IE6下不兼容
解决方案：！important
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7认识的hacker是星号 *
1）min-height：value； 2）min-height：value；
_height：value； height：auto！important；
height：value；
4、百分比的bug
解决方案：父元素宽度为100%，子元素宽度各为50%，在IE6下各个元素宽度之和超过100%
解决方案：给右边浮动的子元素添加clear：right；
5、鼠标指针bug
描述：cursor：hand；只有IE浏览器识别，其他浏览器不识别
解决方案：cursor：pointer；IE6以上浏览器及其他内核浏览器都识别；
6、透明度属性
解决方案：针对IE浏览器：filter：alpha（opacity=value）；（取值范围1--100）
兼容其他浏览器：opacity：value；（取值范围0--1）
7、IE6下图片有空隙产生
解决方案：（1）改变html的排版；
（2）设置img 为display:block ；
（3）设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 。
8、div垂直居中问题：vertical-align:middle;
解决方案：将行高设置为和div一样高：line-height:200px;（内容不要换行）
9、高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding 时。 例：
<style type="text/css">
#box {background-color:#eee; }
#box p {margin:20px 0; text-align:center;//原样式margin-top:20px; margin-bottom:20px; }
</style>
<div id="box">
<p>p对象中的内容</p>
</div>解决方法：（1）在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}；
（2）为div加上 border属性。
二、JavaScript兼容性
1、关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题。
js通过style不可以获取行外样式，当我们需要获取行外样式时: 我们一般通过这两个方法获取行外样式：
（1）IE下：currentStyle
（2）Chrome，FF下：getComputedStyle(oDiv，false) 兼容两个浏览器的写法：
if(oDiv.currentStyle){
alert(oDiv.currentStyle.width);
}else{
alert(getComputedStyle(oDiv,false).width);
}*注:在解决很多兼容性写法时,都是用if..else..
封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7)funtion getStyle(obj,name){
if(obj.currentStyle){
//IE
return obj.currentStyle[name];
}else{
//Chrom,FF
return getComputedStyle(obj,false)[name];
}
}
调用：getStyle(oDiv,'width');2、用“索引”获取字符串每一项出现的兼容性问题
对于字符串也有类似于 数组 这样的通过 下标索引 获取每一项的值。
var str="abcde";
aletr(str[1]);
但是低版本的浏览器IE6,7不兼容
兼容方法:str.charAt(i) //全部浏览器都兼容
var str="abcde";
for(var i=0;i<str.length;i++){
alert(str.charAt(i)); //放回字符串中的每一项
}3、DOM中 childNodes 获取子节点出现的兼容性问题
childNodes：获取子节点,
- IE6-8:获取的是元素节点,正常
- 高版本浏览器:但是会包含文本节点和元素节点(不正常)
解决方法：使用nodeType获得节点的类型，并作出判断
- nodeType=3-->文本节点
- nodeType=1-->元素节点
例: 获取ul里所有的子节点，让所有的子节点背景色变成红色
获取元素子节点兼容的方法:
var oUl=document.getElementById('ul');
for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}注：上面childNodes为我们带来的困扰完全可以有children属性来代替。 children属性：只获取元素节点，不获取文本节点，兼容所有的浏览器， 比上面的好用所以我们一般获取子节点时,最好用children属性。
var oUl=document.getElementById('ul');
oUl.children.style.background="red";4、关于使用 firstChild，lastChild 等，获取第一个/最后一个元素节点时产生的问题
- IE6-8下： firstChild，lastChild，nextSibling，previousSibling，获取第一个元素节点(高版本浏览器IE9+，FF，Chrome不兼容，其获取的空白文本节点)
- 高版本浏览器下：firstElementChild，lastElementChild，nextElementSibling，previousElementSibling(低版本浏览器IE6-8不兼容)
兼容写法: 找到ul的第一个元素节点,并将其背景色变成红色
var oUl=document.getElementById('ul');
if(oUl.firstElementChild){
//高版本浏览器
oUl.firstElementChild.style.background='red';
}else{
//IE6-8
oUl.firstChild.style.background='red';
}5、关于使用 event对象，出现的兼容性问题
（1）获取鼠标位置
IE/Chrom: event.clientX;event.clientY
FF/IE9以上/Chrom: 传参ev--> ev.clientX;ev.clientY（2）获取event对象兼容性写法：
var oEvent==ev||event;
document.oncilck=function(ev){
var oEvent==ev||event;
if(oEvent){
alert(oEvent.clientX);
}
}6、关于为一个元素绑定两个相同事件：attachEvent/attachEventLister 出现的兼容问题。
事件绑定:(不兼容需要两个结合做兼容if..else..)
- IE8以下用: attachEvent('事件名'，fn);
- FF，Chrome，IE9-10用：attachEventLister('事件名'，fn，false)；
多事件绑定封装成一个兼容函数：
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
//IE8以下
obj.attachEvent('on'+ev,fn);
}else{
//FF,Chrome,IE9-10
obj.attachEventLister(ev,fn,false);
}
}
myAddEvent(oBtn,'click',function(){
alert(a);
});
myAddEvent(oBtn,'click',function(){
alert(b);
});7、关于获取滚动条距离而出现的问题
当我们获取滚动条滚动距离时:
- IE，Chrome：document.body.scrollTop
- FF： document.documentElement.scrollTop 兼容处理
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop