針對IE及其它的css hack

你怕黑暗麼發表於2018-10-24
CSS

現在一些針對針對政府的oa專案還要去解決相容IE6 7 8,這對前端開發來說簡直是災難，在要使用一些css3,或者H5的地方，我們就要慎重了，在使用新特性的同時要兼顧老的瀏覽器的，做到優雅降級,或者針對不同瀏覽器做不同樣式

首先是條件判斷,

判斷方式：
<!–[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]–>
<!–[if IE 7]> 僅IE7可識別 <![endif]–>
<!–[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]–>
<!–[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]–>
<!–[if IE 8]> 僅IE8可識別 <![endif]–>
<!–[if IE 9]> 僅IE9可識別 <![endif]–>

再者就是針對樣式表中常用的各個瀏覽器的css hack

針對IE6的css hack

1. *html Selector {} /* Selector 表示 css選擇器 下同 */
2. Selector { _property: value; } /* property: value 表示 css 的屬性名: 屬性值 下同 */

針對IE7的css hack

1. *+html Selector {}/*selector 表示css選擇器*/

針對IE8的css hack

Selector { 
    property: value1; /* W3C MODEL */
    property: value2\0; /* IE 8+ */
    property: value1\9\0; /* IE 9+ */
}

IE6 7 共同的css hack

1. Selector { *property: value; }
2. Selector { #property: value; }
3. Selector { +property: value; }

IE6/IE7/IE8/IE9/IE10共同的css hack

Selector { property: value\9; }

IE8/IE9/IE10均可識別\0

.Selector{margin-left:-2px\0}【IE8/IE9/IE10均可識別\0】

“\9\0″ IE9/IE10均可識別“\9\0”

.Selector{margin-left:-2px\9\0}【IE9/IE10均可識別\9\0】

只有IE9識別的hack

:root .Selector{margin-left:0\9}【只有ie9可識別:root】

針對火狐瀏覽器

@-moz-document url-prefix(){
    .selector{
       
    }
}

相關文章