Are There Specific CSS Selectors Targeting 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?

回答1:

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.

回答2:

Using the css browser selector from http://rafael.adm.br/css_browser_selector/ you can add a simple + to the code and call out IE10 from your CSS.

Look for /msie\s(\d)/ and change it to /msie\s(\d+)/.

Now in your CSS just add .ie10 before your selector like so:

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

You should now see IE10 rendering the 100px width and all other browsers rendering the 90px width.

回答3:

As far as I know, no such CSS selector exists. If you want to target IE10 specifically, why not just write a bit of javascript to set a class on the body element called ie10, then create a specific styles for IE10?

回答4:

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