CSS hack

2017-07-31  本文已影响13人  蝴蝶结199007

(1)Chrome

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /*样式*/
}

js:

var isChrome = Boolean(window.chrome);

(2)IE6

*html Selector {} /* Selector 表示 css选择器 下同 */
Selector { _property: value; } /* property: value 表示 css 的属性名: 属性值 下同 */
Selector { _property/**/: /**/value; }
Selector { -property: value; } /*IE6 css hack常用习惯推荐使用下划线_ */

(3)IE7

*+html Selector {}
*:first-child+html Selector {}

(4)IE8

Selector { /* 注意看value值的 */
    property: value1; /* W3C MODEL */
    property: value2\0; /* IE 8+ */
    property: value1\9\0; /* IE 9+ */
}

(5)IE6、IE7共有

Selector { *property: value; }
Selector { #property: value; }
Selector { +property: value; }

(6)IE6、IE7、IE8共有

Selector { property: value\9; }

(7)IE8+

Selector { property: value\0; }

(8)IE9+

Selector { property: value\9\0; }

(9)区分IE8、9

.Selector{margin-left:-2px\0}【ie8和ie9均可识别\0】
:root .Selector{margin-left:0\9}【只有ie9可识别:root】

(10)判断方式

<!–[if !IE]> 除IE外都可识别 <!–<![endif]–>
<!–[if IE]> 所有的IE可识别 <![endif]–>
<!–[if IE 6]> 仅IE6可识别 <![endif]–>
<!–[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
<!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>
IE7/8/9/10,同理

上一篇 下一篇

猜你喜欢

热点阅读