发表新帖
发表新帖

How to define specific CSS rules for IE9 alone?

前端 未结
关注
8 1770
感情败类
感情败类 2020-12-05 00:33

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:
相关标签:
8条回答
  • 感情败类
    2020-12-05 01:14

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

    IE 6

    * html .ie6 {property:value;}

    or

    .ie6 { _property:value;}

    IE 7

    *+html .ie7 {property:value;}

    or

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

    IE 6 and 7

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

    or

    .ie67 { *property:value;}

    or

    .ie67 { #property:value;}

    IE 6, 7 and 8

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

    IE 8

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

    or

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

    or

    @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

    • Keith Clarke
    • Paul Irish
    • Web Devout
    • The Spanner
    0 讨论(0)
  • 栀梦
    2020-12-05 01:17

    use conditional CSS: (place the code above the <head> on your html, and IE9 will read that extra CSS file)

    <!--[if (gte IE 9)|!(IE)]><!-->
place the link to the CSS file here
<![endif]-->

    This means the approach is with a new CSS file rather than a hack in the classes, this guarantees the CSS are valid.

    0 讨论(0)
 看不清?
提交回复
热议问题