通過CSS程式碼判斷瀏覽器方法大全

技術小胖子發表於2017-11-08
CSS瀏覽器

作為一個web開發員，特別是前臺設計師在做WEB開發的時候經常會遇到一些瀏覽器不相容的情況，這也是許多開發者頭痛的問題，因為這不是開發者技術的問題，而是瀏覽器不統一而導致。那些寫前臺程式碼的程式設計師無一不希望只有一種瀏覽器該多好！可是這個願望不容易實現。

小新在這裡總結了一些通過css程式碼來判斷瀏覽器的型別，從而針對不同的瀏覽器寫出不同的css程式碼來解決瀏覽器相容的問題，希望對大家有所幫助：

一、通過CSS程式碼直接判斷（就是在css程式碼裡面進行判斷）

<style type=”text/css”>   

.top{color:red ;}/*firefox*/    

* html #example{color:blue;}/*ie6*/    

*+ html #example{color:green;}/*ie7*/    

</style>   

</head>   

<body>   

<div class=”top”>在FireFox下顯示為紅色，在IE6.0下顯示為藍色，在IE7.0下顯示為綠色。</div>   

</body>

二、通過CSS條件註釋的方法判斷（條件註釋就是用if語句來判斷瀏覽器的型號）


<style> 

.top{color:#ff6600}/*–火狐顯示為橙色*/ 

</style> 

<!–[if IE 6]> 

<style> 

.top{color:#0000ff}/*–IE6顯示為藍色*/ 

</style> 

<![endif]–> 


<!–[if IE 7]>  

<style> 

.top{color:#ff0000}/*–IE7顯示為紅色*/ 

</style> 

<![endif]–> 


<!–[if IE 8]>  

<style> 

.top{color:#6633cc}/*–IE8顯示為紫色*/ 

</style> 

<![endif]–> 

<body>  

<div class=”top”>在FireFox下顯示為橙色，在IE6.0下顯示為藍色，在IE7.0下顯示為紅色，IE8顯示為紫色</div>  

</body>  

三、針對IE瀏覽器，條件註釋語句還有一些減少邏輯判斷的引數：


lte：Less than or equal to的簡寫（就是小於或等於的意思）。


lt ：Less than的簡寫（就是小於的意思）。


gte：Greater than or equal to的簡寫（就是大於或等於的意思）。


gt ：Greater than的簡寫（也就是大於的意思）。


例如：<!–[if gt IE 5.5]> / 如果IE版本大於5.5 /


          <!–[if lte IE 6]> / 如果IE版本小於等於6 /


          <!–[if !IE]> / 如果瀏覽器不是IE /




      本文轉自許琴 51CTO部落格，原文連結：http://blog.51cto.com/xuqin/925202，如需轉載請自行聯絡原作者


相關文章