css - Apply style ONLY on IE


Translate

Here is my block of CSS:

.actual-form table {
  padding: 5px 0 15px 15px;
  margin: 0 0 30px 0;
  display: block;
  width: 100%;
  background: #f9f9f9;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}

I only want IE 7, 8, and 9 to "see" width: 100%

What is the simplest way to accomplish this?


All Answers
  • Translate

    Update 2017

    Depending on the environment, conditional comments have been officially deprecated and removed in IE10+.


    Original

    The simplest way is probably to use an Internet Explorer conditional comment in your HTML:

    <!--[if IE]>
    <style>
        .actual-form table {
             width: 100%;
        }
    </style>
    <![endif]-->
    

    There are numerous hacks (e.g. the underscore hack) you can use that will allow you to target only IE within your stylesheet, but it gets very messy if you want to target all versions of IE on all platforms.


  • Translate
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
       #myElement {
            /* Enter your style code */
       }
    }
    

    Explanation: It is a Microsoft-specific media query. Using -ms-high-contrast property specific to Microsoft IE, it will only be parsed in Internet Explorer 10 or greater. I have used both the valid values of the media query, so it will be parsed by IE only, whether the user has high contrast enabled or not.


  • Translate

    Apart from the IE conditional comments, this is an updated list on how to target IE6 to IE10.

    See specific CSS & JS hacks beyond IE.

    /***** Attribute Hacks ******/
    
    /* IE6 */
    #once { _color: blue }
    
    /* IE6, IE7 */
    #doce { *color: blue; /* or #color: blue */ }
    
    /* Everything but IE6 */
    #diecisiete { color/**/: blue }
    
    /* IE6, IE7, IE8, but also IE9 in some cases :( */
    #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 */
    
    /* IE8, IE9 */
    #anotherone  {color: blue\0/;} /* must go at the END of all rules */
    
    /* IE9, IE10, IE11 */
    @media screen and (min-width:0\0) {
        #veintidos { color: red}
    }
    
    
    /***** Selector Hacks ******/
    
    /* IE6 and below */
    * html #uno  { color: red }
    
    /* IE7 */
    *:first-child+html #dos { color: red }
    
    /* IE8 (Everything but IE 6,7) */
    html>/**/body #cuatro { color: red }
    
    /* Everything but IE6-8 */
    :root *> #quince { color: red  }
    
    /* IE7 */
    *+html #dieciocho {  color: red }
    
    /* IE 10+ */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
       #veintiun { color: red; }
    }
    

  • Translate

    There are severals hacks available for IE

    Using conditional comments with stylesheet

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

    Using conditional comments with head section css

    <!--[if IE]>
    <style type="text/css">
        /************ css for all IE browsers ****************/
    </style>
    <![endif]-->
    

    Using conditional comments with HTML elements

    <!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->
    

    Using media query

     IE10+
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
     selector { property:value; }
     }
    
     IE6,7,9,10
     @media screen and (min-width: 640px), screen\9 {
     selector { property:value; }
     }
    
     IE6,7
     @media screen\9 {
      selector { property:value; }
     }
    
     IE8
     @media \0screen {
      selector { property:value; }
     }
    
     IE6,7,8
     @media \0screen\,screen\9 {
      selector { property:value; }
     }
    
     IE9,10
     @media screen and (min-width:0\0){
      selector { property:value; }
     }
    

  • Translate

    As well as a conditional comment could also use CSS Browser Selector http://rafael.adm.br/css_browser_selector/ as this will allow you to target specific browsers. You can then set your CSS as

    .ie .actual-form table {
        width: 100%
        }
    

    This will also allow you to target specific browsers within your main stylesheet without the need for conditional comments.


  • Translate

    I think for best practice you should write IE conditional statement inside the <head> tag that inside has a link to your special ie style sheet. This HAS TO BE after your custom css link so it overrides the latter, I have a small site so i use the same ie css for all pages.

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

    this differs from james answer as i think(personal opinion because i work with a designer team and i dont want them to touch my html files and mess up something there) you should never include styles in your html file.


  • Translate

    A bit late on this one but this worked perfectly for me when trying to hide the background for IE6 & 7

    .myclass{ 
        background-image: url("images/myimg.png");
        background-position: right top;
        background-repeat: no-repeat;
        background-size: 22px auto;
        padding-left: 48px;
        height: 42px;
        _background-image: none;
        *background-image: none;
    }
    

    I got this hack via: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/

    #myelement
    {
        color: #999; /* shows in all browsers */
        *color: #999; /* notice the * before the property - shows in IE7 and below */
        _color: #999; /* notice the _ before the property - shows in IE6 and below */
    }
    

  • Translate

    Welcome BrowserDetect - an awesome function.

    <script>
        var BrowserDetect;
        BrowserDetect = {...};//  get BrowserDetect Object from the link referenced in this answer
        BrowserDetect.init();
        // On page load, detect browser (with jQuery or vanilla)
        if (BrowserDetect.browser === 'Explorer') {
          // Add 'ie' class on every element on the page.
          $('*').addClass('ie');
        }
    </script>
    
    <!-- ENSURE IE STYLES ARE AVAILABLE -->
    <style>
        div.ie {
           // do something special for div on IE browser.
        }
        h1.ie {
         // do something special for h1 on IE browser.
        }
    </style>
    

    The Object BrowserDetect also provides version info so we can add specific classes - for ex. $('*').addClass('ie9'); if (BrowserDetect.version == 9).

    Good Luck....


  • Translate

    It really depends on the IE versions ... I found this excellent resource that is up to date from IE6-10:

    CSS hack for Internet Explorer 6

    It is called the Star HTML Hack and looks as follows:

    • html .color {color: #F00;} This hack uses fully valid CSS.

    CSS hack for Internet Explorer 7

    It is called the Star Plus Hack.

    *:first-child+html .color {color: #F00;} Or a shorter version:

    *+html .color {color: #F00;} Like the star HTML hack, this uses valid CSS.

    CSS hack for Internet Explorer 8

    @media \0screen { .color {color: #F00;} } This hacks does not use valid CSS.

    CSS hack for Internet Explorer 9

    :root .color {color: #F00\9;} This hacks also does not use valid CSS.

    Added 2013.02.04: Unfortunately IE10 understands this hack.

    CSS hack for Internet Explorer 10

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .color {color: #F00;} } This hacks also does not use valid CSS.


  • Translate
    <!--[if !IE]><body<![endif]-->
    <!--[if IE]><body class="ie"> <![endif]-->
    
    body.ie .actual-form table {
        width: 100%
    }
    

  • Translate

    For /* Internet Explorer 9+ (one-liner) */

    _::selection, .selector { property:value\0; }
    

    Only this solution perfectly work for me.


  • Translate

    For IE9+

    @media screen and (min-width:0\0) and (min-resolution: +72dpi) {
       // IE9+ CSS
       .selector{
          color: red;
       }
    }
    

    IE Edge 12+

    @supports (-ms-ime-align: auto) {
      .selector {
        color: red;
      }
    }
    

    This one works on Edge and all IEs

    :-ms-lang(x), .selector { color: red; }