如何为 IE 11 编写 CSS hack？ [复制]答案

【问题标题】：How to write a CSS hack for IE 11? [duplicate]如何为 IE 11 编写 CSS hack？ [复制]
【发布时间】：2013-12-30 17:37:48
【问题描述】：

如何仅针对 IE 11 破解或编写 css？我有一个在 IE 11 中看起来很糟糕的网站。我只是到处搜索，但还没有找到任何解决方案。

有没有css选择器？

【问题讨论】：

读起来很有趣-> neowin.net/news/…
我最初发布了一个建议使用条件 cmets 的答案，但 @ExtPro 解释说它们在 IE10 中被删除 - msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
如果它可以检测到 ie9+ 是否也适用于您？
与其使用浏览器检测来定位IE，不如使用特征检测使用Modernizr来检查IE11的问题。如果您向我们提供您网站的链接或详细说明您的问题，我认为我们中的一些人可以帮助您找出您的网站出了什么问题。
@Danield 这实际上是一个完全不同的问题，如果您阅读了整个内容。那个问题真的想区分IE10和IE11，而这个只有IE11。这很微妙但很重要。无论如何...

标签： css css-selectors internet-explorer-11 css-hack

【解决方案1】：

鉴于不断发展的线程，我更新了以下内容：

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;}
}

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 selection

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。然而，这是一个“理想世界”的场景，并不总是可以实现，因此，以上内容应该有助于提供一些不错的选择。

署名/必读

【讨论】：

如果 IE 确实遵循了足够值得信赖的标准，那就太好了，但事实并非如此。存在特定于 IE 的 hack 是有原因的，因为尽管每个版本的 IE 都比以前的版本好一英里，但它仍然没有足够的标准支持，也没有足够的怪癖被视为符合标准的浏览器。
@scragar - 以上建议如果可以避免黑客攻击，则不要使用它们，并不是说你永远不应该使用它们 - 我倾向于问，它是否可以替代感知的 '什么是有效的“损坏的代码”？我认为它不是。
虽然我完全同意，但无法解决所有问题。这是不可能的。例如：IE11在应用border-radius时渲染元素的高度和宽度有问题。真实的故事。因此，您可能会发现自己处于这样一种情况，即您知道自己正在编写正确的代码，而某个特定的浏览器存在错误，因此产生了使用这种 hack 的必要性。
很奇怪，IE总是是主流浏览器中最差的，无一例外。 @SW4，您会考虑以下“损坏的代码”吗？ @media only screen and (max-width: 48em){.somestyle{width:28em;}} ...因为在 IE 11 移动设备上，浏览器会自动放大，因此即使猴子可以看到该元素也不可见可见
在一个完美的世界里，我们将能够完美地编码。就目前而言，IE 的渲染（甚至是 11 版！）经常违反逻辑和标准。这种情况已经持续了十多年。出于这个原因，损坏的浏览器需要损坏的代码来掩盖根本问题——浏览器本身。如果微软只是采用 WebKit，我们将能够停止使用此类黑客，但在那之前......

【解决方案2】：

可以使用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 的库：

https://github.com/ded/bowser

或用于特征检测的modernizr：

http://modernizr.com/

【讨论】：

【解决方案3】：

使用 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>

参考文献

【讨论】：

以 Paul Sweatte 的示例为灵感，我创建了一个适用于 IE 6-11 的漂亮的小型 IE Sniffer：jsfiddle.net/Realto619/HfuXT 希望其他人也觉得它有用...
对我来说，这仅在删除 ie11 hack 中的逗号后才有效，例如*::-ms-backdrop .foo...
检测工作正常，但您仍然需要检查选择器的特异性。在特定于 IE 的选择器之前放置 :root 之类的东西可以解决问题。
.foo {color: green} 对我来说似乎在 IE10 和 IE11 中都有效？如果这对你来说是真的@Paul Sweatte，也许更新代码 sn-p 中的评论？
这很有帮助，谢谢。

【解决方案4】：

我觉得这很有帮助

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
    <script>
    $(function(){
        $('html').addClass('ie11');
    });
    </script>
<?php } ?>

将此添加到您的 <head> 文档下

【讨论】：

您正在使用 PHP 和 jQuery，您都没有将它们列为此答案的依赖项，我建议您更新它。

【解决方案5】：

您可以在样式标签内使用以下代码：

@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 屏幕之外...，它们是通用样式。

【讨论】：

它不适合我

【解决方案6】：

这是一个两步解决方案这是 IE10 和 11 的 hack

    @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

【讨论】：

感谢您重新发布我的 ie11 最有可能来自我们在浏览器黑客方面的共享工作。 +1！
这在 2016 年仍然有效吗？不适合我。
@ScottSimpson 您是否也尝试了下面的 IE11 hack 或者只是上面的 javascript+css 组合？请检查browserstrangeness.bitbucket.org/css_hacks.html 以查看ie11 是否适合您。上面的原始 css-only ie10-11 媒体查询应该仍然有效，并且将其与 ie11 结合以在媒体查询（没有 javascript）中将 ie10 与 ie11 分开应该也可以工作。
示例：@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .selector { IE10-11 特定样式到这里 } _:- ms-fullscreen, :root .selector { IE11 特定样式到这里 } }

【解决方案7】：

所以我最终找到了自己的解决方案。

搜索Microsoft documentation后，我设法找到了一个新的IE11风格msTextCombineHorizontal

在我的测试中，我检查 IE10 样式，如果它们是正匹配，那么我检查仅 IE11 样式。如果我找到了，那么它是 IE11+，如果我没有找到，那么它就是 IE10。

代码示例： Detect IE10 and IE11 by CSS Capability Testing (JSFiddle)

当我发现它们时，我会用更多样式更新代码示例。

注意：这几乎肯定会将 IE12 和 IE13 标识为“IE11”，因为这些样式可能会继续使用。随着新版本的推出，我将添加进一步的测试，并希望能够再次依赖 Modernizr。

我正在将此测试用于回退行为。回退行为只是不那么迷人的样式，它没有减少功能。

【讨论】：

【解决方案8】：

自 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，那就去那里吧。）

【讨论】：

杰夫，你明白了，谢谢！
@Jeff Clayton，感谢您在 BrowserHacks.1+ 上的巨大努力
刚刚在an answer 中使用过这个——我想问一下，对于IE10 上的大多数属性，\9 hack 是否始终如一地工作？它在 IE11 的 10 模式下不起作用，而且我没有要测试的 IE10 的实际副本，这就是导致我使用它来针对 IE11 和 IE10+11 的原因。
对我有用，我按 F12 并在仿真设置中将文档模式更改为 IE10 - 我使用的是 Win10pro-64bit。您是否正在更改用户代理字符串？我之前在 Xp 中一直到 Win8.1 都对其进行了测试，发现 IE6-10 与 slash-9 都可以正常工作，如下所示： .selector { property:value\9;我的 IE11 UAGENT 与你的不同：Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko - 虽然用户代理没有效果，只是用它来看看你的 IE11 还是 Win10版本在某种程度上与本机不同。
好的，我让它在空白页中工作......现在它适用于边缘模式下的 IE11。我难住了。（我还修复了我之前评论中的链接 - 不知何故我链接回这个答案。）