兼容性总结

Posted 2020-08-19 2350305682

一、兼容性问题的由来：不同的浏览器对同一段代码的解析不同，造成页面解析效果不一样。
二、盒模型：IE计算方式：width=content+margin; W3c计算方式：width=content+padding+border+margin
默认：box-sizing:content-box(即W3c方式)；box-sizing:border-box(修改之后变成IE方式)
css兼容性问题：
1、不同浏览器的标签默认的margin、padding不同；
方法：*{margin:0;padding;0}
2、图片默认有间距
方法：img{display:block;}或者使用float
3、块属性标签float后。又有横行的margin的情况下，IE6 margin出现双边距。
方法：在float后再加上_diaplay:inline;(_ *IE6都认识；*IE7认识)
4、IE6下filter滤镜失效（原因：hasLayout没有被触发）
触发IEhasLayout的方法：display:inline-block; position:absolute/relative; zoom:1; float:left/right; width/height:除auto外等等方
法。
5、设置透明度：
.opacity{
filter:alpha(opacity=50); //IE
-moz-opacity:0.5; //旧版的火狐
-khtml-opacity:0.5; //旧版的Safari;
opacity:0.5; //支持css3的浏览器
}

6、前缀 (内核即排版引擎)
不带前缀是css3标准属性，带前缀是各个浏览器的私有属性，该项属性还未纳入标准。
-webkit Chrome/Safari/Opera 内核：webkit
-moz firefox 内核：Gecko
-ms IE 内核：Trident

js兼容性：
1、获取滚动条滚动距离scrollTop (原因：chrome不认识document.documentElement.scrollTop)
chrome: var top=document.body.scrollTop;
IE/firefox: var top=document.documentElement.scrollTop;

2、获取元素节点：
IE: var f=oUl.firstChild;
FF/chrome: var f=oUl.firstElementChild;