兼容性

时间 2019-11-18

标签兼容性繁體版

原文原文链接

内核也称为引擎：浏览器有2个引擎（排版引擎+脚本引擎）
解决兼容性问题的网站：w3help.orgcss

浏览器间内核的差别是产生兼容性问题的根本缘由
doctype:混杂模式、准标准模式、标准模式html

<h1>各浏览器兼容性</h1>
<script>
document.body.innerHTML += navigator.userAgent;//查看内核等浏览器信息
</script>浏览器

浏览器对应的内核
MSIE 6.0:ie6
MSIE 7.0:ie7
MSIE 8.0:ie8，360（兼容模式）
NT 5.1 + Chrome：360（极速模式），谷歌浏览器
NT 5.1 + Chrome + OPR：Opera
NT 5.1 :火狐
360,遨游、QQ...浏览器都是用别人的网站

一、作兼容性的第一件事情：
<!DOCTYPE html>必定不要去掉，这样就是以准标准和标准模式解析
so,不要用右键——打开来打开网页。那样就是用的混杂模式，就算你加了<!DOCTYPE html>也是用混杂模式解析orm

二、css reset（重置）技术：（先破后立，这个有不少问题，太暴力了。工做很多，效率也很差）
列如：<style>
*{
margin:0;
padding:0;
}htm

</style>最暴力的一刀切的技术，已经淘汰
能够针对本身的网站设置一套css reset
三、变种的css reset技术：normalize（不那么暴力。只是把常常要设置的加上）
相对于css reset，推荐使用normalize
四、通用办法：
css Hack技术：打补丁的方法，能解决问题，可是不建议滥用（会影响解析效率，后期修改会很麻烦）
利用浏览器解析CSS时的特色：遇到错误时不会报错，直接跳过。
4-1：important
background:red !important；
backgroundr:bule；
显示出来的是red，由于后面加了 !important，这个是优先级最高的。(ie6当中不认识important)
利用不一样浏览器支持不一样的东西，在这个里面加上哪一个浏览器不认识的东西，哪一个浏览器就会跳过这个设置。
4-2：
-wekkit-animation------这个也是Hack技术
_background------下划线只有IE6认识
background：red \0 ------\0 IE8
*background------ *+<>= IE6和IE7
<style>
#ys{
_border:3px solid red;/*ie6*/
background:green \0;/*ie8*/
}
*+html #ys{/*ie7*/
color: red;
}
@media all and (min-width: 0px){/*谷歌..除了IE6.7.8的*/
p{
font-size: 40px;
}
}
</style>ip

4-3：
针对JS，利用注释的方法来兼容
animation

[if lie IE 6]
lt:小于
lte:小于等于
gt:大于
gte:大于等于it