是否有针对 IE10 的特定 CSS 选择器？答案

【问题标题】：Are There Specific CSS Selectors Targeting IE10?是否有针对 IE10 的特定 CSS 选择器？
【发布时间】：2011-11-11 08:59:42
【问题描述】：

由于 IE 在版本 10 中摆脱了条件 cmets，我迫切需要找到专门针对 IE10 的“CSS hack”。请注意，被“黑”的必须是 选择器，而不是 CSS 属性。

在 Mozilla 中，您可以使用：

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

在 Webkit 中，您通常会这样做：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  h1 {
    color: blue;
  }
}

我如何在 IE10 中做类似的事情？

【问题讨论】：

我只使用 IE 条件注释。此外，我的朋友或家人都不知道 IE 10。
IE10 可能会足够符合标准，不需要任何黑客攻击。和 Tyler，问题说它不支持条件 cmets。
@BoltClock 不幸的是，即使在符合标准的网络浏览器（Webkit/Firefox/Opera）中也存在一些奇怪的变化，因此在尝试创建像素时，@-moz-document 之类的选择器确实有帮助所有浏览器的完美体验。尽管我非常喜欢允许浏览器向用户展示稍微不同的体验——但我的客户却没有。

标签： css internet-explorer css-selectors css-hack vendor-prefix

【解决方案1】：

使用 http://rafael.adm.br/css_browser_selector/ 中的 css 浏览器选择器，您可以在代码中添加一个简单的 + 并从您的 CSS 中调用 IE10。

查找/msie\s(\d)/ 并将其更改为/msie\s(\d+)/。

现在在您的 CSS 中，只需在您的选择器之前添加 .ie10，如下所示：

.ie10 .class-name { width: 100px; }
.class-name { width: 90px; }

您现在应该看到 IE10 呈现 100px 宽度，而所有其他浏览器呈现 90px 宽度。

【讨论】：

【解决方案2】：

下面的例子展示了如何做到这一点

/* 
 #ie10 will only be red in MSIE 10, 
 both in high contrast (display setting) and default mode 
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #ie10 { color: red; }
}

警告：可能也适用于 IE11+。

【讨论】：

感谢您的意见，我接受了这个作为答案。它是否会针对 IE11 是我认为我们中的任何人都不应该担心的事情，一段时间:-)
这是危险的想法。即使在 IE11 出来之前还有很长一段时间，这意味着代码在你的脑海中会变得不那么新鲜，而且可能更难修复。此外，没有人真正知道 IE 的下一个版本何时发布，或者您正在解决的错误将得到修复。如果错误在更高版本中得到修复，我只会使用这样的 hack 来解决不会破坏的问题。
刚试过用这个方法。仅适用于开发环境，不适用于生产环境。

【解决方案3】：

我不确定这是否符合您的选择器与属性要求，但我想出了以下方法，同时尝试在 IE7-9 中伪造 text-shadow，然后在 IE10 中关闭 hack。关键是在IE10中使用新的-ms-animation东西。

.header {
    /* For browsers that support it to add a little more punch to a @font-face */
    text-shadow: rgba(100, 100, 100, 0.5) 0 0 2px;

    /* Make IE7-9 do faux bold instead and then turn down the opacity to match */
    *font-weight: bold;
    font-weight: bold\9;
    *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: 0.75\9;

    /* Uh oh! We've also caught IE10 in our above hack */

    /* But IE10 supports CSS3 animations. Will a high duration keep CPU usage down? */
    -ms-animation: text-shadow 60s infinite;
}

/* Define the animation */
@-ms-keyframes text-shadow {
    0%, 100% {
        font-weight: normal;
        opacity: 1;
    }
}

【讨论】：

【解决方案4】：

据我所知，不存在这样的 CSS 选择器。如果你想专门针对 IE10，为什么不写一点 javascript 在 body 元素上设置一个名为 ie10 的类，然后为 IE10 创建一个特定的样式？

【讨论】：