瀏覽器的兼容性問題拾遺

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

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

　　瀏覽器大戰(zhàn)

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

　　2.什么是CSS hack

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

　　hack的原理

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

　　hack的缺點

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

　　什么情況下使用hack

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

　　3.常見問題及解決方案

　　問題1：Firefox瀏覽器點擊鏈接出現的虛線框;

　　方法：我們可以給a標簽設 置outline屬性：

　　a{outline:none;}

　　a:focus{outline:none;}

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

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

　　4.CSS樣式重置

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

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

　　樣式重置的的不足

　　1.不當地破壞了所有瀏覽器的基本樣式，例如使用*{margin:0;padding:0},去掉ol,ul的列表樣式，使得一些語義元素缺乏恰當的樣式表現。

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

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

　　各大瀏覽器使用的內核

　　IE瀏覽器:使用trident內核;

　　Firefox瀏覽器：使用gecko內核;

　　safari瀏覽器：使用webkit內核;

　　opera瀏覽器：以前是presto內核，現在改用google chrome的Blink內核;

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

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

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


猜你喜歡：