|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
CSS需這樣識別火狐Firefox、Chrome瀏覽器寫兼容性代碼
作者:admin 時間:2022-4-23 2:19:59 瀏覽:寫CSS需要考慮瀏覽器兼容性問題，Chrome、Firefox火狐、IE等瀏覽器都會對某些CSS屬性不能識別，或者對某些CSS屬性值的渲染結(jié)果不太一樣，從而導(dǎo)致網(wǎng)頁排版或樣式出現(xiàn)問題。因此，我們要針對不同的瀏覽器，某些CSS代碼要略有不同。
由于Chrome瀏覽器使用量比較大，所以我現(xiàn)在編寫CSS代碼都是用Chrome來做主要瀏覽器調(diào)試前端顯示效果，然后針對Firefox火狐、IE等瀏覽器編寫?yīng)氉缘拇a。為此，我需要用CSS識別火狐Firefox、Chrome、IE等瀏覽器，讓代碼能在不同的瀏覽器執(zhí)行獨自的CSS。
如何判斷識別Chrome瀏覽器
之前用以下代碼，可以識別Chrome瀏覽器
@media screen and (-webkit-min-device-pixel-ratio:0) {}不過現(xiàn)在發(fā)現(xiàn)，這個代碼火狐Firefox瀏覽器也能滿足了，也就是，Chrome、Firefox都會運行這個條件里的CSS代碼。因此，現(xiàn)在已經(jīng)不能再用這個代碼來識別Chrome瀏覽器了。
如何判斷識別Firefox瀏覽器
現(xiàn)在可以用以下代碼，識別Firefox瀏覽器。
@-moz-document url-prefix(){}測試發(fā)現(xiàn)，這個代碼可以識別Firefox瀏覽器，Chrome不會讀里面的CSS代碼。
如何正確編寫兼容性代碼
我們在編寫代碼時，不用既要識別Chrome，又要識別Firefox，只需識別Firefox瀏覽器即可。比如下面的代碼：
font-size:15px;
@-moz-document url-prefix(){
font-size:14px;
}
代碼的意思是，除了在Firefox瀏覽器里字體大小是14px，在其余瀏覽器里的字體大小都是15px。
總結(jié)
通過前面的示例代碼，應(yīng)該明白識別Firefox瀏覽器的CSS代碼，同時也應(yīng)該知道如何去正確編寫CSS代碼了。
當(dāng)然了，編寫CSS代碼，不僅要識別Chrome和Firefox瀏覽器，其他瀏覽器也要兼顧才行，以下幾篇文章，可以幫助你如何編寫識別其他瀏覽器的CSS代碼。
標(biāo)簽: -moz-document hack
- 站長推薦
