如何写IE 11的CSS黑客？
我怎么才能黑客或编写只有IE 11的CSS？ 我有一个网站，在IE浏览器看起来不好11.我只是在这里和那里search，但没有find任何解决scheme呢。
有没有任何CSSselect器？
使用Microsoft特定CSS规则的组合来过滤IE11：
<!doctype html> <html> <head> <title>IE10/11 Media Query Test</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style> @media all and (-ms-high-contrast:none) { .foo { color: green } /* IE10 */ *::-ms-backdrop, .foo { color: red } /* IE11 */ } </style> </head> <body> <div class="foo">Hi There!!!</div> </body> </html> 由于以下原因，filter如此工作：
当用户代理不能parsingselect器（即它不是有效的CSS 2.1）时，它必须忽略select器和下面的声明块（如果有的话）。
<!doctype html> <html> <head> <title>IE10/11 Media Query Test</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style> @media all and (-ms-high-contrast:none) { .foo { color: green } /* IE10 */ *::-ms-backdrop, .foo { color: red } /* IE11 */ } </style> </head> <body> <div class="foo">Hi There!!!</div> </body> </html>
鉴于不断演变的线索，我更新了以下内容：
IE 6
* html .ie6 {property:value;}
要么
.ie6 { _property:value;}
IE 7
*+html .ie7 {property:value;}
要么
*:first-child+html .ie7 {property:value;}
IE 6和7
@media screen\9 { .ie67 {property:value;} }
要么
.ie67 { *property:value;}
要么
.ie67 { #property:value;}
IE 6,7和8
@media \0screen\,screen\9 { .ie678 {property:value;} }
IE 8
html>/**/body .ie8 {property:value;}
要么
@media \0screen { .ie8 {property:value;} }
仅限IE 8标准模式
.ie8 { property /*\**/: value\9 }
IE 8,9和10
@media screen\0 { .ie8910 {property:value;} }
只有IE 9
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { // IE9 CSS .ie9{property:value;} }
IE 9及以上
@media screen and (min-width:0\0) and (min-resolution: +72dpi) { // IE9+ CSS .ie9up{property:value;} }
IE 9和10
@media screen and (min-width:0\0) { .ie910{property:value\9;} /* backslash-9 removes ie11+ & old Safari 4 */ }
IE 10只
_:-ms-lang(x), .ie10 { property:value\9; }
IE 10及以上
_:-ms-lang(x), .ie10up { property:value; }
要么
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up{property:value;} }
IE 11（及以上）
_:-ms-fullscreen, :root .ie11up { property:value; }
Javascript替代品
Modernizr的
Modernizr在页面加载时可以快速运行以检测function; 然后创build一个包含结果的JavaScript对象，并将类添加到html元素中
用户代理select
使用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; MSIE 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'
允许非常有针对性的CSSselect器，例如：
html[data-useragent*='Chrome/13.0'] .nav{ background:url(img/radial_grad.png) center bottom no-repeat; }
脚注
如果可能的话，找出并解决任何问题，而不用劈头皮。 支持渐进式增强和优雅的降级 。 然而，这是一个“理想的世界”情况，并不总是可以得到的，因此，上述情况应该有助于提供一些很好的select。
归因/基本阅读
- 杰夫·克莱顿 | Browserhacks.com
- 基思·克拉克
- 保罗爱尔兰人
- networking虔诚
- 扳手
这里有两个步骤的解决scheme，这里是IE10和11的破解
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles go here */ }
因为IE10和IE11支持-ms-high-cotrast，你可以利用这个来瞄准这两个浏览器
如果你想排除这个IE10你必须创build一个IE10特定的代码，如下所示使用用户代理技巧，你必须添加这个Javascript
var doc = document.documentElement; doc.setAttribute('data-useragent', navigator.userAgent);
和这个HTML标签
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
现在你可以像这样写你的CSS代码
html[data-useragent*='MSIE 10.0'] h1 { color: blue; }
欲了解更多信息请参考本网站， 克里斯教程
如果你想瞄准IE11和以后，这是我发现：
_:-ms-fullscreen, :root .selector {}
这里是获取更多信息的好资源：browserhacks.com
自2013年秋季以来，我一直在写这些文章，并将它们提供给BrowserHacks.com–我写的这个文档非常简单，只有IE 11支持。
<style type="text/css"> _:-ms-fullscreen, :root .msie11 { color: blue; } </style>
当然还有…
<div class="msie11"> This is an Internet Explorer 11 CSS Hack <div>
所以文本显示在蓝色与Internet Explorer 11.玩得开心。
–
更多的IE浏览器和其他浏览器CSS在我的现场testing网站黑客攻击：
更新： http : //browserstrangeness.bitbucket.io/css_hacks.html
MIRROR： http : //browserstrangeness.github.io/css_hacks.html
（如果你也在寻找MS Edge的CSS Hacks，那就去哪里吧。）
您可以在样式标记中使用以下代码：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles go here */ }
下面是一个适合我的例子：
<style type="text/css"> @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles go here */ #flashvideo { width:320px; height:240; margin:-240px 0 0 350px; float:left; } #googleMap { width:320px; height:240; margin:-515px 0 0 350px; float:left; border-color:#000000; } } #nav li { list-style:none; width:240px; height:25px; } #nav a { display:block; text-indent:-5000px; height:25px; width:240px; } </style>
请注意，由于（#nav li）和（#nav a）不在@media屏幕中，所以它们是一般的样式。
您可以使用js并在html中添加一个类来维护条件注释的标准：
var ua = navigator.userAgent, doc = document.documentElement; if ((ua.match(/MSIE 10.0/i))) { doc.className = doc.className + " ie10"; } else if((ua.match(/rv:11.0/i))){ doc.className = doc.className + " ie11"; }
或者使用像bowser一样的lib：
或用于function检测的modernizr：
所以我最终find了自己的解决scheme。
通过微软文档search后，我设法find一个新的IE11风格msTextCombineHorizontal
在我的testing中，我检查IE10风格，如果他们是积极的匹配，那么我检查只IE11风格。 如果我find了，那么它是IE11 +，如果我没有，那么它是IE10。
代码示例： 通过CSSfunctiontesting（JSFiddle）检测IE10和IE11
当我发现它们时，我会用更多样式更新代码示例。
注意：这几乎肯定会将IE12和IE13标识为“IE11”，因为这些样式可能会继续下去。 随着新版本的推出，我将增加进一步的testing，希望能够再次依靠Modernizr。
我正在使用此testing回退行为。 后备行为只是不那么迷人的造型，它没有减lessfunction。
我发现这有帮助
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?> <script> $(function(){ $('html').addClass('ie11'); }); </script> <?php } ?>
把它添加到你的<head>文件中
