我怎样才能为IE 11破解或编写css？我有一个在IE 11中看起来很糟糕的网站。我只是在这里搜索，但还没找到任何解决方案。
有没有css选择器？
答案 0 :(得分：249)
使用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>
由于以下因素而影响此作品：
当用户代理无法解析选择器时（即，它不是有效的CSS 2.1），它必须忽略选择器和以下声明块（如果有的话）。
<!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>
<强>参考
答案 1 :(得分：206)
根据不断发展的主题，我更新了以下内容：
_:-ms-fullscreen, :root .foo { property:value; }
_:-ms-lang(x), .foo { property:value; }
或
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.foo{property:value;}
}
_:-ms-lang(x), .foo { property:value\9; }
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
//.foo CSS
.foo{property:value;}
}
@media screen and (min-width:0\0) {
.foo /* backslash-9 removes.foo & old Safari 4 */
}
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
//.foo CSS
.foo{property:value;}
}
@media screen\0 {
.foo {property:value;}
}
.foo { property /*\**/: value\9 }
html>/**/body .foo {property:value;}
或
@media \0screen {
.foo {property:value;}
}
*+html .foo {property:value;}
或
*:first-child+html .foo {property:value;}
@media \0screen\,screen\9 {
.foo {property:value;}
}
@media screen\9 {
.foo {property:value;}
}
或
.foo { *property:value;}
或
.foo { #property:value;}
@media \0screen\,screen\9 {
.foo {property:value;}
}
* html .foo {property:value;}
或
.foo { _property:value;}
Modernizr在页面加载时快速运行以检测功能;然后呢 使用结果创建一个JavaScript对象，并向其中添加类 html元素
使用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选择器，例如：
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
如果可能，请确定并修复任何问题，而不是黑客攻击。支持progressive enhancement和graceful degradation。然而，这是一个并非总能获得的“理想世界”场景，因此上述内容应该有助于提供一些好的选择。
答案 2 :(得分：62)
这是一个两步解决方案 这是对IE10和11的攻击
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
因为IE10和IE11支持-ms-high-cotrast你可以利用这个来定位这两个浏览器
如果你想从中排除IE10，你必须创建一个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;
}
有关详细信息，请参阅此网站wil tutorail，Chris Tutorial
如果您想要定位IE11及更高版本，以下是我发现的内容：
_:-ms-fullscreen, :root .selector {}
Here is a great resource for getting more information: browserhacks.com
答案 3 :(得分：23)
自2013年秋季以来，我一直在写这些并将它们贡献给BrowserHacks.com - 我写的这篇文章很简单，只有IE 11支持。
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
当然还有div ......
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
因此，文本以蓝色显示在Internet Explorer 11中。玩得开心。
-
我的实时测试网站上有更多IE和其他浏览器CSS黑客攻击：
更新：http://browserstrangeness.bitbucket.io/css_hacks.html
MIRROR：http://browserstrangeness.github.io/css_hacks.html
（如果你也在寻找MS Edge CSS Hacks，那就去哪了。）
答案 4 :(得分：6)
您可以在样式标记内使用以下代码：
@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屏幕之外......，它们是一般风格。
答案 5 :(得分：1)
你可以使用js并在html中添加一个类来维持conditional comments的标准：
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：
或用于特征检测的现代化：
答案 6 :(得分：1)
所以我最终找到了解决这个问题的方法。
搜索Microsoft documentation后，我设法找到了新的IE11样式msTextCombineHorizontal
在我的测试中，我检查IE10样式，如果它们是正面匹配，那么我检查IE11的样式。如果我找到它，那么它是IE11 +，如果我没有，那么它是IE10。
代码示例： Detect IE10 and IE11 by CSS Capability Testing (JSFiddle)
当我发现它们时，我会用更多样式更新代码示例。
注意：这几乎肯定会将IE12和IE13识别为“IE11”，因为这些样式可能会发扬光大。随着新版本的推出，我将进一步增加测试，希望能够再次依赖Modernizr。
我正在使用此测试进行回退行为。后备行为只是不那么迷人的风格，它没有减少功能。
答案 7 :(得分：0)
我发现这很有用
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
在<head>文档