瀏覽器的兼容性問題拾遺

　　1.背景介紹瀏覽器兼容性的起源

　　瀏覽器兼容性問題又被稱為網(wǎng)頁兼容性或網(wǎng)站兼容性問題，指網(wǎng)頁在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁間的兼容問題。簡單的來說就是各大瀏覽器廠商有著一套屬于自己的標(biāo)準(zhǔn)，瀏覽器各自推出非標(biāo)準(zhǔn)的語句以專有的特色功能分割市場。然而不同瀏覽器其內(nèi)核亦盡相同，所以各個瀏覽器對網(wǎng)頁的解析就有一定出入，這也是導(dǎo)致瀏覽器兼容問題出現(xiàn)的主要原因，這就是我們常說的瀏覽器兼容性問題。

　　瀏覽器大戰(zhàn)

　　瀏覽器大戰(zhàn)，指不同的網(wǎng)絡(luò)瀏覽器之間的市場份額競爭。常用來指以下兩組競爭：第一組是20世紀時微軟公司的Internet Explorer取代了網(wǎng)景公司的Netscape Navigator主導(dǎo)地位。第二組為2003年后InternetExplorer份額遭其他瀏覽器蠶食，包括Mozilla Firefox，Google Chrome，Safari和Opera。

　　2.什么是CSS hack

　　Hack，顧名思義是修改的意思，由于不同廠商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等)，對CSS的支持、解析不一樣，導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果。這時，我們?yōu)榱双@得統(tǒng)一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程，叫做CSS hack!

　　hack的原理

　　由于不同的瀏覽器和瀏覽器各版本對CSS的支持及解析結(jié)果不一樣，以及CSS優(yōu)先級對瀏覽器展現(xiàn)效果的影響，我們可以據(jù)此針對不同的瀏覽器情景來應(yīng)用不同的CSS。

　　hack的缺點

　　使用hack雖然對頁面表現(xiàn)的一致性有好處，但過多的濫用會造成html文檔混亂不堪，增加管理和維護的負擔(dān)，反而會得不償失。

　　什么情況下使用hack

　　一般情況下，我們盡量避免使用CSS hack，但是有些情況為了顧及用戶體驗實現(xiàn)向下兼容，不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我們的項目頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染，這種情況下我們就必須使用hack技巧了。

　　3.常見問題及解決方案

　　問題1：Firefox瀏覽器點擊鏈接出現(xiàn)的虛線框;

　　方法：我們可以給a標(biāo)簽設(shè) 置outline屬性：

　　a{outline:none;}

　　a:focus{outline:none;}

　　問題2：谷歌瀏覽器字體的最小為12px，當(dāng)字體設(shè)置小于12px時也只能顯示為12px;

　　方法：使用transform屬性來改變字體大小

　　4.CSS樣式重置

　　前面提到了網(wǎng)站兼容性問題，指網(wǎng)頁在各種瀏覽器上的顯示效果可能不一致： 不同瀏覽器的默認樣式之間會有差別，例如ul默認帶有縮進的樣式，在IE下，它的縮進是通過margin實現(xiàn)的，而Firefox下，它的縮進是由padding實現(xiàn)的。這種情況讓人不由從瀏覽器的兼容性引申到樣式重置;所以這面對這個問題的時候，有些人給出的解決的方法就是一開始就將瀏覽器的默認樣式全部去掉，更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式。覆蓋瀏覽器的CSS默認屬性。把瀏覽器提供的默認樣式覆蓋掉，這就是樣式重置。

　　樣式重置的作用：CSS樣式重置讓各個瀏覽器的CSS樣式有一個統(tǒng)一的基準(zhǔn)，而實現(xiàn)這一基準(zhǔn)最主要的方式就是將這些樣式統(tǒng)統(tǒng)清零。

　　樣式重置的的不足

　　1.不當(dāng)?shù)仄茐牧怂袨g覽器的基本樣式，例如使用*{margin:0;padding:0},去掉ol,ul的列表樣式，使得一些語義元素缺乏恰當(dāng)?shù)臉邮奖憩F(xiàn)。

　　2.粗暴的reset使得一些交互控件外觀在瀏覽器下失調(diào)，例如去掉了outline，使得交互控件缺乏視覺反饋。

　　3.增加瀏覽器樣式計算成本，有一定的性能負擔(dān)，因為平白無故的增加了CSS文件的大小，增加了很多的渲染。

　　各大瀏覽器使用的內(nèi)核

　　IE瀏覽器:使用trident內(nèi)核;

　　Firefox瀏覽器：使用gecko內(nèi)核;

　　safari瀏覽器：使用webkit內(nèi)核;

　　opera瀏覽器：以前是presto內(nèi)核，現(xiàn)在改用google chrome的Blink內(nèi)核;

　　Chrome瀏覽器：使用Blink內(nèi)核(基于webkit，google與opera software共同開發(fā))

作者：傳智播客前端與移動開發(fā)培訓(xùn)學(xué)院

首發(fā)：http://web.itcast.cn


猜你喜歡：