如何仅针对 IE 11 破解或编写 css？我有一个在 IE 11 中看起来很糟糕的网站。我只是到处搜索，但还没有找到任何解决方案。
有没有css选择器？
441222 次
8 回答
321
使用 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>参考
于 2014-02-28T02:53:47.467 回答
282
鉴于不断发展的线程，我更新了以下内容：
IE 11（及更高版本..）
_:-ms-fullscreen, :root .foo { property:value; }
IE 10 及以上
_:-ms-lang(x), .foo { property:value; }
或者
@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;}
}
即 8,9 和 10
@media screen\0 {
.foo {property:value;}
}
仅限 IE 8 标准模式
.foo { property /*\**/: value\9 }
即 8
html>/**/body .foo {property:value;}
或者
@media \0screen {
.foo {property:value;}
}
即 7
*+html .foo {property:value;}
或者
*:first-child+html .foo {property:value;}
即 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;}
即 6、7 和 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
即 6
* html .foo {property:value;}
或者
.foo { _property:value;}
Javascript 替代品
现代化
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;
}
脚注
如果可能，在没有黑客攻击的情况下识别并修复任何问题。支持渐进增强和优雅降级。然而，这是一个“理想世界”的场景，并不总是可以实现，因此——以上内容应该有助于提供一些好的选择。
归因/基本阅读
于 2013-12-12T11:08:43.950 回答
68
这是一个两步解决方案，这里是对 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 tutorialail，Chris Tutorial
如果你想针对 IE11 及更高版本，这就是我发现的：
_:-ms-fullscreen, :root .selector {}
于 2014-04-01T13:58:28.837 回答
30
自 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 hack 在我的现场测试站点上：
更新：http : //browserstrangeness.bitbucket.io/css_hacks.html
镜像：http ://browserstrangeness.github.io/css_hacks.html
（如果你也在寻找 MS Edge CSS Hacks，那就去那里吧。）
于 2014-07-26T19:32:35.397 回答
7
您可以在样式标签中使用以下代码：
@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 屏幕之外...，它们是一般样式。
于 2014-03-27T21:18:11.590 回答
2
所以我最终找到了自己解决这个问题的方法。
在搜索Microsoft 文档后，我设法找到了一种新的 IE11 风格msTextCombineHorizontal
在我的测试中，我检查 IE10 样式，如果它们是正匹配，那么我检查仅 IE11 样式。如果我找到它，那么它就是 IE11+，如果我没有找到，那么它就是 IE10。
代码示例： 通过 CSS 能力测试（JSFiddle）检测 IE10 和 IE11
当我发现它们时，我会用更多样式更新代码示例。
注意：这几乎肯定会将 IE12 和 IE13 标识为“IE11”，因为这些样式可能会继续使用。随着新版本的推出，我将添加进一步的测试，并希望能够再次依赖 Modernizr。
我正在将此测试用于回退行为。后备行为只是不那么迷人的样式，它没有减少功能。
于 2014-07-22T04:44:02.713 回答
0
您可以使用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 这样的库：
或用于特征检测的modernizr：
于 2014-02-09T14:44:02.570 回答
0
我发现这很有帮助
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
<head>在您的文档下添加此内容
于 2014-03-17T06:46:42.807 回答