瀏覽器的兼容性問題拾遺

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

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

　　瀏覽器大戰(zhàn)

　　瀏覽器大戰(zhàn)，指不同的網(wǎng)絡(luò)瀏覽器之間的市場份額競爭。常用來指以下兩組競爭：第一組是20世紀(jì)時(shí)微軟公司的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)效果。這時(shí)，我們?yōu)榱双@得統(tǒng)一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個(gè)針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程，叫做CSS hack!

　　hack的原理

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

　　hack的缺點(diǎn)

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

　　什么情況下使用hack

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

　　3.常見問題及解決方案

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

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

　　a{outline:none;}

　　a:focus{outline:none;}

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

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

　　4.CSS樣式重置

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

　　樣式重置的作用：CSS樣式重置讓各個(gè)瀏覽器的CSS樣式有一個(gè)統(tǒng)一的基準(zhǔn)，而實(shí)現(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.增加瀏覽器樣式計(jì)算成本，有一定的性能負(fù)擔(dān)，因?yàn)槠桨谉o故的增加了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ā))

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

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


猜你喜歡：