IE6.0/IE7.0/IE8.0 的CSS-HACK寫法與注釋

ie6.0/ie7.0/ie8.0. 為了讓所寫代碼在各主流瀏覽器中正常運行，我們不得不為各種瀏覽器寫對應的樣式。本文，博主將為你總結css針對各瀏覽器的相容hack(以ie6/ie7/ie8 /ff為主),以及ie特有的條件注釋使用方法.
一、通用區分方式：
ie系列可識別 9 ;
ie6、ie7能識別*，標準瀏覽器（如ff）不能識別*；
ie6能識別*，但不能識別 !important；
ie7能識別*，也能識別 !important；
ie8能識別，不能識別*，+,_,* 加!important;
ff不能識別*，但能識別 !important；
例如style=”*width:10px!important; width:20px;”，其在ie7下寬度為10px,在ie6下寬度是20px.
其中還有如下三種寫法：
第一種

view sourceprint?1 width:100px; /* firefox及其他瀏覽器 */

2 width:200px; /* ie8能識別*/

3 *width:300px!important; /* ,ie7 既能能識別*號，也能識別important */

4 *width:400px; /* ie6也能識別*號 */

5 /*mr.think提示：請注意書寫順序@mrthink.net*/

第二種

view sourceprint?1 width:100px; /* firefox及其他瀏覽器 */

2 width:200px; /* ie8能識別*/

3 *width:300px; /* ie7也能識別*號 */

4 _width:400px; /* ie6能識別底線*/

5 /*mr.think提示：請注意書寫順序@mrthink.net*/

第三種

view sourceprint?1 width:100px; /* firefox及其他瀏覽器 */

2 width:200px; /* ie8能識別*/

3 +width:300px; /* +只識別ie6 ie7 */

4 _width:400px; /* ie6能識別底線*/

5 /*mr.think提示：請注意書寫順序@mrthink.net*/

二、不常見的hack(op表示opera，sa表示safari),其中第3條比較實用
1..color1{ color:#f00; color/***/:#00f /***/}/*ie6,ie7,ie8,ff,op,sa識別*/
2..color2{ color:#f00; color /***/:#00f /*9**/}/*ie7,ie8,ff,op,sa識別*/
3..color3{ color:#f00; color/***/:#00f 9}/*ie6,ie7,ie8識別*/
4..color4{ color:#f00; color /***/:#00f9}/*ie7,ie8識別*//*“color”和“/***/”之間有個空格*/
三、各種瀏覽器獨立支援的hack
width:100px;/* 支援ie8 */
_width:100px; /* 支援ie6 */
[width:100px; /* 支援ie6,7 */
+width:100px; /* 支援ie6,7 */
*width:100px; /* 支援ie6,7 */
*width:100px!important; /* 支援ie6,7, */
*+width:100px; /* 支援ie6,7, */
*+width:100px!important;/* 支援ie6,7, */
width:100px9; /* 支援ie6,7,8 */
width:100px!important; /* 支援ie6,7,8,ff */
width:100px; /*ie5.x不支援 ie6、ie7、ie8、ff支援 */

四、ie特有的html條件注釋使用規則
1.僅ie可見的寫法

view sourceprint?1 此處內容只有ie可見<![endif]–>

2.僅ie6可見的寫法

view sourceprint?1 <!-–[if ie 6]>此處內容只有ie6.0可見<![endif]–->

3.僅ie7可見的寫法

此處內容只有ie7.0可見

4.版本區間可顯示寫法

view sourceprint?1 ie6以及ie6以下版本可識別
view sourceprint?1 ie6以及ie6以上版本可識別