css hack

作者: zengde 分类: css 发布时间: 2019-05-05 09:10

IE 11 (及以上..)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
_:-ms-fullscreen, :root .foo { property:value; }
_:-ms-fullscreen, :root .foo { property:value; }
_:-ms-fullscreen, :root .foo { property:value; }

IE 10 及以上

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
_:-ms-lang(x), .foo { property:value; }
_:-ms-lang(x), .foo { property:value; }
_:-ms-lang(x), .foo { property:value; }

or

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.foo{property:value;}
}<code></code>
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .foo{property:value;} }<code></code>
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .foo{property:value;}
}

IE 10

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
_:-ms-lang(x), .foo { property:value\9; }
_:-ms-lang(x), .foo { property:value\9; }
_:-ms-lang(x), .foo { property:value\9; }

IE 9 及以上

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
//.foo CSS
.foo{property:value;}
}
@media screen and (min-width:0\0) and (min-resolution: +72dpi) { //.foo CSS .foo{property:value;} }
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  //.foo CSS
  .foo{property:value;}
}

IE 9 和 10

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@media screen and (min-width:0\0) {
.foo /* backslash-9 removes.foo & old Safari 4 */
}
@media screen and (min-width:0\0) { .foo /* backslash-9 removes.foo & old Safari 4 */ }
@media screen and (min-width:0\0) {
    .foo /* backslash-9 removes.foo & old Safari 4 */
}

IE 9

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
//.foo CSS
.foo{property:value;}
}
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { //.foo CSS .foo{property:value;} }
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 //.foo CSS
 .foo{property:value;}
}

IE 8,9 和10

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@media screen\0 {
.foo {property:value;}
}
@media screen\0 { .foo {property:value;} }
@media screen\0 {
    .foo {property:value;}
}

IE 8 标准模式

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.foo { property /*\**/: value\9 }
.foo { property /*\**/: value\9 }
.foo { property /*\**/: value\9 }

IE 8

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
html>/**/body .foo {property:value;}
html>/**/body .foo {property:value;}
html>/**/body .foo {property:value;}

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@media \0screen {
.foo {property:value;}
}
@media \0screen { .foo {property:value;} }
@media \0screen {
    .foo {property:value;}
}

IE 7

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
*+html .foo {property:value;}
*+html .foo {property:value;}
*+html .foo {property:value;}

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
*:first-child+html .foo {property:value;}
*:first-child+html .foo {property:value;}
*:first-child+html .foo {property:value;}

IE 6, 7 和 8

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@media \0screen\,screen\9 {
.foo {property:value;}
}
@media \0screen\,screen\9 { .foo {property:value;} }
@media \0screen\,screen\9 {
    .foo {property:value;}
}

IE 6 和 7

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@media screen\9 {
.foo {property:value;}
}
@media screen\9 { .foo {property:value;} }
@media screen\9 {
    .foo {property:value;}
}

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.foo { *property:value;}
.foo { *property:value;}
.foo { *property:value;}

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.foo { #property:value;}
.foo { #property:value;}
.foo { #property:value;}

IE 6, 7 和 8

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@media \0screen\,screen\9 {
.foo {property:value;}
}
@media \0screen\,screen\9 { .foo {property:value;} }
@media \0screen\,screen\9 {
    .foo {property:value;}
}

IE 6

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
* html .foo {property:value;}
* html .foo {property:value;}
* html .foo {property:value;}

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.foo { _property:value;}
.foo { _property:value;}
.foo { _property:value;}

通过Javascript

Modernizr

Modernizr 在页面加载时快速运行以检测功能; 然后它创建一个包含结果的JavaScript对象,并将类添加到html元素

User agent 选择器

Javascript:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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':'');
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':'');
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 元素添加以下属性:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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'
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'
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.:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
html[data-useragent*='Chrome/13.0'] .nav{ background:url(img/radial_grad.png) center bottom no-repeat; }
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

zengde个人的小站