IE 10 specific CSS

Question

Can I have CSS which is IE specific?

In this situation, I can't include another script.

So I can't do this:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

and this does not work:

<!--[if IE]>
    <style>
        @media only screen and (min-width: 943px) and (orientation:portrait){
            .ele{
                width:100px;
            }
        }
    </style>
<![endif]-->

Is there any other way of adding IE specific CSS?

You can do something like `` then a fallback one for if not ie, then just style your ie elements: `.ie .etc {}` [See this for more info](http://css-tricks.com/snippets/html/add-body-class-just-for-ie/) — Pete, Nov 18 '14 at 13:27
For IE 10 + style, you can use this @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ } — HaveNoDisplayName, Nov 18 '14 at 13:29
In what version of ie this doesn't work? If it is below ie9 they do not support media queries. — Bojan Petkovski, Nov 18 '14 at 13:29

score 7 · Accepted Answer · answered Nov 18 '14 at 13:30

You can try this,

IE6 Only
==================
_selector {...}

IE6 & IE7
==================
*html or { _property: }

IE7 Only
==================
*+html or { *property: } - Keep in mind that you have to put the IE7 property first within the same selector.

IE8
==================
.selector/*\**/ { color:#f00; }
**NOTE**: LESS v1.5.0 shoots out an error when compiling the CSS if you use this hack :/


IE8 and IE9 (TOTALLY NOT NEEDED - I LEFT HERE FOR REFERENCE ONLY)
==================
.selector { color:#f00\9; } - http://stackoverflow.com/questions/660652/ie8-css-selector

The above solution doesn't work with font-family, so instead you need to use "\0/ !important"
Example: { font-family:Arial \0/ !important; }          
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

Also, using "\9" is picked up by IE10 and IE11 so you need to redeclare the CSS rules with "-ms-high-contrast:". See info below.

IE9 Only
==================
:root .class/#id { property:value \0/IE9; }
**NOTE**: Prepos v4.0.1 shoots out an error when compiling the CSS if you use this hack :/
http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx

IE10 Only
http://css-tricks.com/ie-10-specific-styles/
==================
Use this JavaScript: 
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

Then use this CSS:
html[data-useragent*='MSIE 10.0'] h1 { color: blue; }

IE10 and IE11
==================
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .selector { property:value; }
}

Refer https://gist.github.com/ricardozea/5549389

yugi · Answer 2 · 2014-11-18T17:11:31.967

0

write IE specific css styles .

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

edited Nov 18 '14 at 17:11

answered Nov 18 '14 at 13:34

yugi

834
1
15
28

IE 10 specific CSS

2 Answers2