如何讓CSS區別IE版本

時間 2019-12-17

標籤如何 css 區別版本欄目 CSS 简体版

原文原文鏈接

關於IE瀏覽器實在太坑爹了，但你又不得不去解決它，不過就本人所知，IE8—IE10差異不大，至少本人尚未遇到過在IE8環境下到了IE9及以上版本就出現坑爹的問題，但咱們又不得不面對IE8如下的版本，說實話，我也不想去處理IE所謂的Bug，但又不得不去處理。誰叫咱們都是幹苦逼的職業的！css

1、CSS規則（IE CSS hacks）html

其實也只是在樣式裏說明一下只有IE識別的CSS規則。好比，在CSS屬性前置一個」*」區分IE7和低版本，而前置一個」_」則區分IE7及低版本。可是這個方法最好別用（不是我不推薦），由於這個CSS規則還不能被W3C CSS識別（這就是坑爹之處）。瀏覽器

* IE8 及低版本: 在CSS屬性後置」\9″, 如 height:100%\9;
* IE7 及低版本: 在CSS屬性前置」*」, 如 *height:100%;
* IE6 及低版本: 在CSS屬性前置」_」, 如 _height:100%;

1 .joks {
2     background: gray; /* standard */
3  
4     background: pink\9; /* IE 8 and below */
5  
6     *background: green; /* IE 7 and below */
7  
8     _background: blue; /* IE 6 */
9 }

2、給HTML加個if條件判斷spa

這辦法實際上是Paul Irish大神發明的。它實現的辦法是經過IE條件判斷來給HTML設置不一樣的className，而後在CSS中經過給不一樣的className下的後代設置不一樣的樣式便可實現。這個辦法比較可行，W3C能識別。設計

1 <!--[if lt IE 7 ]> 
2 <html class="ie6"> < ![endif]-->
3 <!--[if IE 7 ]> </html>
4 <html class="ie7"> < ![endif]-->
5 <!--[if IE 8 ]>
6  </html>
7 <html class="ie8"> < ![endif]-->
8 <!--[if IE 9 ]> 
9 </html>

3、用IE條件判斷語句code

其實說白了，這個方法你們都在用，並且用的人還挺多的，沒辦法，至少大牛們是不會這麼幹的（別急，大牛的方法我會講的。）htm

IE條件判斷語句也許是用的最多的區分IE版本(IE6, IE7, IE8)的辦法了（我剛剛已經說了，IE8以上的版本差異不大）。看看下面用來區分IE不一樣版本的代碼：blog

<!--[if IE 8]> = IE8版本
<!--[if lt IE 8]> = IE7版本以低版本
<!--[if gte IE 8]> = IE8版本及高版本

1 <!--[if IE 8]>
2 <style type="text/css">
3     /* css for IE 8 */
4 </style>
5 < ![endif]-->
6  
7 <!--[if lt IE 8]>
8     <link href="ie7.css" rel="stylesheet" type="text/css" />
9 < ![endif]-->

4、自我感受方法（大牛靠感受來作）class

這個方法我可不推薦，可是若是你瞭解每一個版本的Bug的話，那你到能夠試試，固然了，IE6和IE7再到IE8識別的間距有所不一樣，但當你設計版面的時候，我我的推薦你能夠試試把間距擴大到20px以上，這樣纔不會出現IE間距的Bug，固然了，其它的Bug方式還有許多，這裏我就不一一介紹了！至少我想說，避免Bug是不可能的，規則是死的，但方法是活的，靠的是想像力而已。hack

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。