css ie hack整理

網上有不少關於ie hack的文章,可能因爲文章發佈後ie的版本還在升級。因此致使有些hack寫法已經不適用了。如下是本人整理的ie6-11的一些hack經常使用寫法。(如下默認文檔模式爲標準模式)css

1.經過條件判斷ie版原本引用不一樣的css瀏覽器

<!--[if IE]>只試用ie瀏覽器<![endif]-->
<!--[if !IE]>只試用非ie瀏覽器<![endif]-->
<!--[if IE 6]>只試用ie6瀏覽器<![endif]-->
<!--[if gt IE 6]>只試用大於ie6瀏覽器<![endif]-->
<!--[if lt IE 9]>只試用小於ie9瀏覽器 <![endif]--> 
<!--[if gte IE 8]>只試用大於或等於ie8瀏覽器<![endif]--> 
<!--[if lte IE 7]>只試用小於或等於ie7瀏覽器<![endif]-->

以上方式以此類推,能夠經過引用不一樣的外鏈css或直接使用內嵌樣式表 來知足基本要求。測試

 

2.直接使用css屬性的hack寫法。spa

1)!important  因爲ie6不知別!important,其餘瀏覽器都識別,因此能夠用於ie6 hack。blog

div{
  max-width:100px;
  width:auto !important;
  width:100px;          
}

 

2)  下劃線 '_'   ie6的有一個專用hack寫法。文檔

div{
  color:blue;
  _color:red;  /*只有在ie6下才會表現爲紅色*/
}

 

3) 星號 '*'  ie6,7的公用寫法。  class

div{
  color:blue;
  *color:red;   /*在ie6,7下都會表現爲紅色*/
}

ie7沒有專用寫法,*會同時識別ie6,7,若是隻想識別ie7,能夠同時配合下劃線‘_’使用。  import

 

4) \0   ie8及以上瀏覽器都會識別\0寫法,ie6,7不識別hack

div{
    color:red;
    color:#ccc\0;
}

以上寫法只有ie8及以上瀏覽器都會識別,ie6,7不識別,並且會致使ie6,7不識別普通寫法(color:red),須要同時使用'*'來適配ie6,7。引用

 

5)\9   ie6-10都識別\9,10以上不識別

div{
    color:red;
    color:blue\9;                   /*ie 6-10都爲blue*/
} 

 

6)\9\0  ie9,10識別   ie8,11不識別,使用默認    ie6,7不識別,也不使用默認

div{
  color:red;
  color:blue\9\0;  
}

以上寫法在ie9,10中會表現會藍色,在ie8,11下會表現爲紅色,而在ie6,7下則表現爲黑色,須要單獨爲ie6,7使用 '*' hack。

 

以上就是總結的ie hack寫法,代碼和例子均測試過。歡迎你們補充,分享。

最後說一句,若是能夠經過其餘方式避免ie不一樣版本表現不一致,儘可能不要使用hack寫法。

相關文章
相關標籤/搜索