Create CSS for Internet Explorer Only

Apply style ONLY on IE

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.

Create CSS for Internet Explorer Only

Answer to your first question: to include a stylesheet file in IE only, wrap your <link>ing with a conditional comment. Here's an example on how to do it:

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

Answer to your second question older versions of IE do not support border-radius. IE9 does support it, though. There's no workaround other than to use images or third-party plugins like jQuery corner.

How to write a CSS hack for IE 11?

Use a combination of Microsoft specific CSS rules to filter IE11:

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

Filters such as this work because of the following:

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

<!doctype html>

<html>

 <head>

  <title>IE10/11 Media Query Test</title>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <style>

    @media all and (-ms-high-contrast:none)

     {

     .foo { color: green } /* IE10 */

     *::-ms-backdrop, .foo { color: red } /* IE11 */

     }

  </style>

 </head>

 <body>

  <div class="foo">Hi There!!!</div>

 </body>

</html>

Specify CSS properties for the IE only in the CSS file

I wrote is very simple and only supported by IE 11+

<style type="text/css">

  _:-ms-fullscreen, :root .msie11 { color: blue; }

</style>

// or you can try this

<style>

  @media all and (-ms-high-contrast:none)

    {         

      *::-ms-backdrop, .foo { color: red } /* IE11 */

    }

</style>

How to apply class only for IE?

For IE10+ you can do the following:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .container-wrapp{padding-bottom:0;}
}

Demo Fiddle (Note that the text is red only in IE 10+)

@media all and (-ms-high-contrast: none),

(-ms-high-contrast: active) {

  .red {

    color: red

  }

}

<div class="red">text</div>

How do I specify IE 11 specific css file?

Use the below hack and followed by your css style:

*::-ms-backdrop,

Example:

*::-ms-backdrop,/*Your element*/ {
       /*Your styles*/
    }

Note:It will only affects in IE browsers.So You need to apply your normal style before this.

Create CSS for Internet Explorer Only

Apply style ONLY on IE

Create CSS for Internet Explorer Only

How to write a CSS hack for IE 11?

Specify CSS properties for the IE only in the CSS file

How to apply class only for IE?

Demo Fiddle (Note that the text is red only in IE 10+)

How do I specify IE 11 specific css file?

Related Topics

Leave a reply