CSS HACK 如何書寫

琨琨12138發表於2019-02-19

有三種表現形式,css屬性字首法,選擇器字首法,以及IE條件註釋法。

css屬性字首法

IE6+ css hack:

Selector { _property: value; }
IE7+ css hack:

Selector { *+property: value; }
IE8+ css hack:

Selector { property: value ; }
IE9+ css hack:

Selector { property: value9 ; }

選擇器字首法:

是針對一些頁面表現不一致或者需要特殊對待的瀏覽器,在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的字首進行hack。
目前最常見的是
html 字首只對IE6生效
+html +字首只對IE7生效
@media screen9{…}只對IE6/7生效
@media screen {body { background: red; }}只對IE8有效
@media screen,screen9{body { background: blue; }}只對IE6/7/8有效
@media screen {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0 ) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效

IE條件註釋法:

<!–[if !IE]><!–> 除IE外都可識別 <!–<![endif]–>
<!–[if IE]> 所有的IE可識別 <![endif]–>
<!–[if IE 6]> 僅IE6可識別 <![endif]–>
<!–[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]–>
<!–[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]–>

相關文章