How to define specific CSS rules for IE9 alone?

Friends, please help me in defining specific css rule for IE9? For example like this

/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }

标签： css internet-explorer-9 css-hack

8条回答

劫难

2楼-- · 2019-01-13 13:49

I think you can do the same as if you want to write specific code for IE6 but say IE9 instead :)

<!--[if IE 9]>
Special instructions for IE 9 here
<![endif]-->

0人赞添加讨论(0) 举报

劫难

3楼-- · 2019-01-13 13:52

You can prepend the CSS style with

:root

to make it IE9-specific, like this:

:root #element { color:pink \0/IE9; }  /* IE9 */

0人赞添加讨论(0) 举报

爷的心禁止访问

4楼-- · 2019-01-13 13:53

Note the accepted answer also targets IE10. As such, for a more complete list:

IE 6

* html .ie6 {property:value;}

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

*:first-child+html .ie7 {property:value;}

IE 6 and 7

@media screen\9 {
    .ie67 {property:value;}
}

.ie67 { *property:value;}

.ie67 { #property:value;}

IE 6, 7 and 8

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

@media \0screen {
    .ie8 {property:value;}
}

IE 8 Standards Mode Only

.ie8 { property /*\**/: value\9 }

IE 8,9 and 10

@media screen\0 {
    .ie8910 {property:value;}
}

IE 9 only

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 and above

@media screen and (min-width:0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

IE 9 and 10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

IE 10 only

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 and above

_:-ms-lang(x), .ie10up { property:value; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

IE 11 (and above..)

_:-ms-fullscreen, :root .ie11up { property:value; }

Javascript alternatives

Modernizr

Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element

User agent selection

The 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':'');

Adds (e.g) the below to the html element:

data-useragent='Mozilla/5.0 (compatible; MSIE 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'

Allowing very targetted CSS selectors, e.g.:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

Footnote

If possible, avoid browser targeting. Identify and fix any issue(s) you identify. Support progressive enhancement and graceful degradation. With that in mind, this is an 'ideal world' scenario not always obtainable in a production environment, as such- the above should help provide some good options.

Attribution / Essential Reading

0人赞添加讨论(0) 举报

放荡不羁爱自由

5楼-- · 2019-01-13 13:54

\9 is a "CSS hack" specific to Internet Explorer.

This simply means that the one specific line of CSS ending with a \9;

In your example, If your CSS looked like this...

html .twit-post .delete_note a 
{ 
background-position-y: 2px\9; 

}
html .twit-post .delete_note a:hover 
{ 
 background-position-y: -14px\9;
 }

The result would be background-position-y: -14px; in IE 9

0人赞添加讨论(0) 举报