主流浏览器的兼容性问题

为什么会有兼容性问题？

市场上浏览的内核不尽相同，所以各个浏览器对网页的解析就会有一定的出入。如果我们的网页需要在主流浏览器上正常运行，就需要做好兼容

Trident内核的浏览器： IE、Maxthon、TT
Gecko内核：Firefox、Netcape6及以上版本
Presto内核：Opera7及以上版本
Webkit内核：Chrome、Safari

对浏览器的兼容性问题，一般分HTML、JS兼容、CSS兼容

HTML部分

H5新标签在IE9以下的浏览器识别

html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。

respond.min: 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，故这两种方案还是需要的。

<!--[if lt IE 9]>
 <script type="text/javascript" src="js/html5shiv.js"></script>
或者
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>  
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>  

<![endif]-->

ul标签在IE重点额内外边距问题

ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。

解决方法：统一设置ul的内外边距为0

CSS样式

不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：css里 {margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符来设置各个标签的内外补丁是0。

由此引出一个reset的问题,根据需要选取

html{color:#000;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}

图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加上问题一中提到的通配符也不起作用。
碰到几率：20%
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道

min-height的兼容写法

.divbox{
    min-height:200px;
    height:auto !important;
    height:200px;
    overflow:visible;
}

JS兼容性

标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；
事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准
window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement
IE下，even不存在target属性
1
srcObj = event.srcElement ? event.srcElement : event.target;
在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。
比如：var year= new Date().getYear();
ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject
IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同
其他浏览器：parentNode parentNode.childNodes
IE：parentElement parentElement.children
event.srcElement
脚本兼容无外乎浏览器支不支持哪个属性或者，哪个方法，因此绝大部分的脚本兼容性问题都是用if else来解决~

HTML部分

H5新标签在IE9以下的浏览器识别

ul标签在IE重点额内外边距问题

CSS样式

JS兼容性

ul标签在IE重点额内外边距问题