css hack
IE 11 (及以上..)
_:-ms-fullscreen, :root .foo { property:value; }
IE 10 及以上
_:-ms-lang(x), .foo { property:value; }
or
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.foo{property:value;}
}
IE 10
_:-ms-lang(x), .foo { property:value\9; }
IE 9 及以上
@media screen and (min-width:0\0) and (min-resolution: +72dpi) { //.foo CSS .foo{property:value;} }
IE 9 和 10
@media screen and (min-width:0\0) { .foo /* backslash-9 removes.foo & old Safari 4 */ }
IE 9
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { //.foo CSS .foo{property:value;} }
IE 8,9 和10
@media screen\0 { .foo {property:value;} }
IE 8 标准模式
.foo { property /*\**/: value\9 }
IE 8
html>/**/body .foo {property:value;}
或
@media \0screen { .foo {property:value;} }
IE 7
*+html .foo {property:value;}
或
*:first-child+html .foo {property:value;}
IE 6, 7 和 8
@media \0screen\,screen\9 { .foo {property:value;} }
IE 6 和 7
@media screen\9 { .foo {property:value;} }
或
.foo { *property:value;}
或
.foo { #property:value;}
IE 6, 7 和 8
@media \0screen\,screen\9 { .foo {property:value;} }
IE 6
* html .foo {property:value;}
或
.foo { _property:value;}
通过Javascript
Modernizr
Modernizr 在页面加载时快速运行以检测功能; 然后它创建一个包含结果的JavaScript对象,并将类添加到html元素
User agent 选择器
Javascript:
var b = document.documentElement; b.setAttribute('data-useragent', navigator.userAgent); b.setAttribute('data-platform', navigator.platform ); b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
以上代码将在 html
元素添加以下属性:
data-useragent='Mozilla/5.0 (compatible; M.foo 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)' data-platform='Win32'
使用目标 CSS 选择器, e.g.:
html[data-useragent*='Chrome/13.0'] .nav{ background:url(img/radial_grad.png) center bottom no-repeat; }
来源:https://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11