浏览器兼容性问题
浏览器常用的前缀有：
- -moz代表firefox浏览器私有属性
- -ms代表IE浏览器私有属性
- -webkit代表chrome、safari私有属性
- -o代表opera私有属性
一、html部分
H5新标签在IE9以下的浏览器识别
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
html5shiv.js下载地址
https://github.com/aFarkas/html5shiv/releases
二、CSS样式的兼容性
css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同 IE的条件注释hack： <!--[if IE 6]>此处内容只有IE6.0可见<![endif]--> <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
常见CSS属性兼容
- inline-block: >=ie8
- min-width/min-height: >=ie7
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圆角: >= ie9
- 阴影: >= ie9
- 动画/渐变: >= ie10
list-style-image准确定位的问题
问题：
li前设置图片时，图片与其后的文字对齐问题
解决：
1、采用背景定位 和 字符缩进的方法
background:url() no-repeat left center;text-index:16px;
2、采用相对定位方法
li 设置list-style:url();
li的子元素position:relative;top:-5px;
单选框、复选框与后面的文字对不齐
问题：
单选框、复选框与后面的文字对不齐。
解决：
.align{font-size:12px;}
.align input{ display:block; float:left;}
.align label{ display:block; float:left;padding-top:3px; *padding-top:5px;}
图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（有人使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以尽量不要使用）
标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-h
eight:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
li中内容超过长度后以省略号显示
此技巧适用与IE、Opera、safari、chrom浏览器，FF暂不支持。
<style type="text/css">
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
为什么无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多：
例如:overflow:hidden zoom:0.08 line-height:1px
chrome浏览器下不支持字体小于12像素
通过-webkit-text-size-adjust: none;来解决
字体大小定义不同
问题表现：对字体大小small定义不同，Firefox为13px，而IE为16px，差别比较大
解决方法：使用指定的字体大小如14px或者使用em
常见的兼容性问题？
不同浏览器的标签默认的margin和padding不一样。 *{margin:0;padding:0;}
渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 {background-color:#f1ee18;/*所有识别*/.background-color:#00deff\9; /*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}
设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
三、JavaScript的兼容性
事件绑定方法函数不同：标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；
事件的捕获方式不一致：标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准window.event获取的；
获取目标元素的方法不同：标准浏览器是event.target，而IE下是event.srcElement
ajax的实现方式不同：这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject
获得DOM节点的父节点、子节点的方式不同： 其他浏览器：parentNode parentNode.childNodes IE：parentElement parentElement.children
鼠标坐标：e.pageX, e.pageY VS window.event.x, window.event.y
原生ajax中低版本ie不支持xmlhttprequest对象
解决方法是做一个判断，如果有xmlhttprequest方法，则调用，若没有，则改用ie浏览器的ActiveXobject方法：
if(window.XMLHttpRequest){
var oAjax=window.XMLHttpRequest
}else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
} 低版本浏览器不支持getElementByClassName
解决方法是重写一个getByClass()函数：
function getByClass(obj,sClass){
var aResult = [];
if(obj.getElementsByClassName){
aResult = obj.getElementsByClassName(sClass);
}else{
var aEle = obj.getElementsByTagName('*');
for(var i=0;i<aEle.length;i++){
var aClass = aEle[i].className.split(' ');
if(findInArr(aClass,sClass)){ //调用自定义的findArr方法
aResult.push(aEle[i]);
}
}
}
return aResult;
}
function findInArr(arr,sClass){
for(var i=0;i<arr.length;i++){
if(arr[i]==sClass){
return true;
}
}
return false;
}
