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

Posted 2023-03-06

【中文标题】是否有针对 IE10 的特定 CSS 选择器？

【英文标题】：Are There Specific CSS Selectors Targeting IE10?

【发布时间】：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 之类的选择器确实有帮助所有浏览器的完美体验。尽管我非常喜欢允许浏览器向用户展示稍微不同的体验——但我的客户却没有。

【参考方案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 创建一个特定的样式？