css ie hack整理

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

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寫法。

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

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

 

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

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

 

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

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

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

 

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

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寫法。