技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

CSS需這樣識(shí)別火狐Firefox、Chrome瀏覽器寫兼容性代碼

作者:admin    時(shí)間:2022-4-23 2:19:59    瀏覽:

寫CSS需要考慮瀏覽器兼容性問題，Chrome、Firefox火狐、IE等瀏覽器都會(huì)對(duì)某些CSS屬性不能識(shí)別，或者對(duì)某些CSS屬性值的渲染結(jié)果不太一樣，從而導(dǎo)致網(wǎng)頁排版或樣式出現(xiàn)問題。因此，我們要針對(duì)不同的瀏覽器，某些CSS代碼要略有不同。

由于Chrome瀏覽器使用量比較大，所以我現(xiàn)在編寫CSS代碼都是用Chrome來做主要瀏覽器調(diào)試前端顯示效果，然后針對(duì)Firefox火狐、IE等瀏覽器編寫?yīng)氉缘拇a。為此，我需要用CSS識(shí)別火狐Firefox、Chrome、IE等瀏覽器，讓代碼能在不同的瀏覽器執(zhí)行獨(dú)自的CSS。

CSS需這樣識(shí)別火狐Firefox、Chrome瀏覽器寫兼容性代碼 

如何判斷識(shí)別Chrome瀏覽器

之前用以下代碼，可以識(shí)別Chrome瀏覽器

@media screen and (-webkit-min-device-pixel-ratio:0) {}

不過現(xiàn)在發(fā)現(xiàn)，這個(gè)代碼火狐Firefox瀏覽器也能滿足了，也就是，Chrome、Firefox都會(huì)運(yùn)行這個(gè)條件里的CSS代碼。因此，現(xiàn)在已經(jīng)不能再用這個(gè)代碼來識(shí)別Chrome瀏覽器了。

如何判斷識(shí)別Firefox瀏覽器

現(xiàn)在可以用以下代碼，識(shí)別Firefox瀏覽器。

@-moz-document url-prefix(){}

測試發(fā)現(xiàn)，這個(gè)代碼可以識(shí)別Firefox瀏覽器，Chrome不會(huì)讀里面的CSS代碼。

如何正確編寫兼容性代碼

我們?cè)诰帉懘a時(shí)，不用既要識(shí)別Chrome，又要識(shí)別Firefox，只需識(shí)別Firefox瀏覽器即可。比如下面的代碼：

font-size:15px;
@-moz-document url-prefix(){
  font-size:14px;
}

代碼的意思是，除了在Firefox瀏覽器里字體大小是14px，在其余瀏覽器里的字體大小都是15px。

總結(jié)

通過前面的示例代碼，應(yīng)該明白識(shí)別Firefox瀏覽器的CSS代碼，同時(shí)也應(yīng)該知道如何去正確編寫CSS代碼了。

當(dāng)然了，編寫CSS代碼，不僅要識(shí)別Chrome和Firefox瀏覽器，其他瀏覽器也要兼顧才行，以下幾篇文章，可以幫助你如何編寫識(shí)別其他瀏覽器的CSS代碼。

標(biāo)簽: -moz-document  hack  
x