css hack for IE6,7,8,9,11

通常在前端开发中,我们很容易遇到这样的问题,就是自己写好的页面的在Chrome浏览器里面明明是好的,但是放在IE里面样式就变了,当然这是对于新手来说的。老程序猿都知道这是IE的不兼容造成的,但是有时候也会忘记一些关于CSS样式的兼容IE写法,所以这里,顺便整理一下这些方法,与人方便,于己方便。

IE 6

1
2
3
4
html .ie6 {property:value;}
or
.ie6 { _property:value;}

IE 7

1
2
3
*+html .ie7 {property:value;}
or
*:first-child+html .ie7 {property:value;}

IE 6 and 7

1
2
3
4
5
6
7
8
@media screen\9 {
.ie67 {property:value;}
}
or
.ie67 { *property:value;}
or
.ie67 { #property:value;}

IE 6, 7 and 8

1
2
3
@media \0screen\,screen\9 {
.ie678 {property:value;}
}

### IE 8

1
2
3
4
5
html>/**/body .ie8 {property:value;}
or
@media \0screen {
.ie8 {property:value;}
}

IE 8 Standards Mode Only

1
.ie8 { property /*\**/: value\9 }

IE 8,9 and 10

1
2
3
@media screen\0 {
.ie8910 {property:value;}
}

IE 9 only

1
2
3
4
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}

IE 9 and above

1
2
3
4
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}

IE 9 and 10

1
2
3
@media screen and (min-width:0\0) {
.ie910{property:value\9;} /* backslash-9 removes ie11+ & old Safari 4 */
}

IE 10 only

1
_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 and above

1
2
3
4
5
6
_:-ms-lang(x), .ie10up { property:value; }
or
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}

IE 11 (and above..)

1
_:-ms-fullscreen, :root .ie11up { property:value; }
Fork me on GitHub