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

发布于 2024-12-03 07:55:32 字数 382 浏览 1 评论 0原文

由于 IE 在版本 10 中取消了条件注释，我迫切需要找到专门针对 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 中做类似的事情？

原文

Since IE is getting rid of conditional comments in version 10, I'm in dire need to find a "CSS hack" targeting IE10 specifically. Note that it has to be the selector that's getting "hacked" and not the CSS-properties.

In Mozilla, you can use:

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

While in Webkit, you usually do:

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

How would I do something similar in IE10?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

枯寂 2024-12-10 07:55:32

以下示例展示了如何执行此

/* 
 #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+ 中工作。

The following example shows how to do this

/* 
 #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; }
}

Warning: will probably work in IE11+, too.

回复收藏 0 原文

余生共白头 2024-12-10 07:55:32

使用 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 { 宽度：90px;您

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

回复收藏 0 原文

对你的占有欲 2024-12-10 07:55:32

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

回复收藏 0 原文

生来就爱笑 2024-12-10 07:55:32

我不确定这是否符合您的选择器与属性要求，但我在尝试在 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;
    }
}

I'm not sure if this fits your selector vs property requirements but I came up with the following method while trying to fake text-shadow in IE7-9 and then turn off the hack in IE10. The key is to use the new -ms-animation stuff in IE10.

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

回复收藏 0 原文

~没有更多了~