兼容性

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。