瀏覽器兼容性問題

megatron 發(fā)布于2019-08-23 11:36 / 812人閱讀

摘要：一兼容性新標(biāo)簽在低于的瀏覽器中的識別解決以下瀏覽器對新增標(biāo)簽的不識別，并導(dǎo)致不起作用的問題。目前流行的庫有以及，它們都可以修正很多已知的瀏覽器之間的差異性。

問題：經(jīng)常遇到的瀏覽器的兼容性的情況、解決方法？
思路：首先明確項目要兼容哪些瀏覽器的最低版本，然后考慮到CSS樣式和JavaScript在這些瀏覽器的兼容性。

一、HTML 兼容性
??1.H5新標(biāo)簽在低于IE9的瀏覽器中的識別
??html5shiv.min.js：解決ie9以下瀏覽器對html5新增標(biāo)簽的不識別，并導(dǎo)致CSS不起作用的問題。
??respond.min.js: 讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
??
??引入respond.min.js，但要在css的后面（越早引入越好，在ie下面看到頁面閃屏的概率就越低，因為最初css會先渲染出來，如果respond.js加載得很后面，這時重新根據(jù)media query解析出來的css會再改變一次頁面的布局等，所以看起來有閃屏的現(xiàn)象）。

??2.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的內(nèi)/外補(bǔ)丁不同
??雖然這些年來隨著瀏覽器的迅速發(fā)展與規(guī)范的統(tǒng)一，瀏覽器特性碎片化的情況有所改善，但是在不同的瀏覽器之間仍然存在著很多的行為差異。而解決這種問題的最好的辦法就是使用某個CSS Reset來為所有的元素設(shè)置統(tǒng)一的樣式，保證你能在相對統(tǒng)一干凈的樣式表的基礎(chǔ)上開始工作。目前流行的Reset庫有 normalize.css, minireset 以及 ress ，它們都可以修正很多已知的瀏覽器之間的差異性。而如果你不打算用某個外在的庫，那么可以使用如下的基本規(guī)則:
*{
??margin: 0;
??padding: 0;
??box-sizing: border-box;
}
??*號這樣一個通用符在編寫代碼的時候是快，但如果網(wǎng)站很大，CSS樣式表文件很大，這樣寫的話，他會把所有的標(biāo)簽都初始化一遍，這樣就大大的加強(qiáng)了網(wǎng)站運(yùn)行的負(fù)載，會使網(wǎng)站加載的時候需要很長一段時間。

二、CSS 兼容性
??1.IE的條件注釋hack：
??
??

??2.IE 屬性過濾器（較為常用的hack方法）
??針對不同的 IE 瀏覽器，可以使用不同的字符來對特定的版本的 IE 瀏覽器進(jìn)行樣式控制。

??3.瀏覽器 CSS 兼容前綴
??使用特定的瀏覽器前綴是CSS開發(fā)中常見的工作之一，不同的瀏覽器、不同的屬性對于前綴的要求也不一樣，這就使得我們無法在編碼過程中記住所有的前綴規(guī)則。并且在寫樣式代碼的時候還需要加上特定的瀏覽器前綴支持也是個麻煩活，幸虧現(xiàn)在也是有很多工具可以輔助我們進(jìn)行這樣的開發(fā):

Online tools: Autoprefixer

Text editor plugins: Sublime Text, Atom

Libraries: Autoprefixer (PostCSS)

??4.a 標(biāo)簽的幾種 CSS 狀態(tài)的順序
??很多人在寫 a 標(biāo)簽的樣式，會疑惑為什么寫的樣式?jīng)]有效果，或者點(diǎn)擊超鏈接后，hover、active 樣式?jīng)]有效果，其實(shí)只是寫的樣式被覆蓋了。
??正確順序:L-V-H-A : a:link, a:visited, a:hover, a:active {}
?? ":link": a標(biāo)簽還未被訪問的狀態(tài)；
?? ":visited": a標(biāo)簽已被訪問過的狀態(tài)；
?? ":hover": 鼠標(biāo)懸停在a標(biāo)簽上的狀態(tài)；
?? ":active": a標(biāo)簽被鼠標(biāo)按著時的狀態(tài)；

??5.IE6 雙倍邊距的問題
??在 ie6 中設(shè)置浮動，同時又設(shè)置 margin，會出現(xiàn)雙倍邊距的問題
??解決方法：display: inline;

??6.透明度的兼容CSS設(shè)置
??IE用 filter:alpha(opacity=60)，而其他主流瀏覽器用 opacity:0.6;

??三、JavaScript的兼容性
兼容性對象	一般瀏覽器	IE
綁定和刪除事件處理程序	addEventListener removeEventListener	attachEvent detachEvent
獲取事件的目標(biāo)	event.target	event.srcElement
阻止事件默認(rèn)行為	event.returnValue	event.preventDefault
停止事件冒泡	stopPropagation	cancelBubble
創(chuàng)建XHR對象	XMLHttpRequest構(gòu)造函數(shù)	activeXObject