教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

瀏覽器的兼容性問題拾遺

更新時(shí)間:2018年09月13日15時(shí)57分 來源:傳智播客 瀏覽次數(shù):

  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)先級對瀏覽器展現(xiàn)效果的影響,我們可以據(jù)此針對不同的瀏覽器情景來應(yīng)用不同的CSS。

  hack的缺點(diǎn)

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

  什么情況下使用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)樣式之間會有差別,例如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ā))



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

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


猜你喜歡:

0 分享到:
和我們在線交談!