Apply style ONLY on IE

Question

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?

Why are you trying to do this? Which version(s) of IE are you targeting? What about IE10? (doesn't support the usual conditional comments) — thirtydot, Jun 23 '12 at 21:32
What reason could you have to target IE9 but *not* IE10? I'd love to know... — thirtydot, Jun 23 '12 at 21:34
I have a records management application that will only be used by my clients who are using IE 7, 8 and 9. — FastTrack, Jun 23 '12 at 21:35
I still think that if you need to do this, you're doing [something wrong](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). — thirtydot, Jun 23 '12 at 21:42
Are you saying I'm asking my question in an incorrect way? Or my CSS is incorrect? — FastTrack, Jun 23 '12 at 21:50
I'm saying that what you're trying to do is not normal. You probably have *some other problem* with your page that nobody here can diagnose because you've asked a narrow question on how to fix your problem in the way that you believe is best. — thirtydot, Jun 23 '12 at 21:56
IE doesn't interpret `width: auto` for block elements in the same way other browsers such as Firefox or Chrome do. In Chrome/Firefox `width:auto` will extend the width of a block element the full width of its container. IE does not do this and requires `width: 100%` — FastTrack, Jun 23 '12 at 22:01
That's not normally true. If you can make a http://jsfiddle.net/ / http://jsbin.com/ demo showing what you just described, I'll see if there's a better solution. — thirtydot, Jun 23 '12 at 22:07
Has anyone tried this? https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ — Pramesh Bajracharya, May 28 '18 at 07:40

Himanshu Dwivedi · Answer 1 · 2016-04-06T12:47:45.090

323

@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.

edited Apr 06 '16 at 12:47

answered Apr 06 '16 at 10:49

Himanshu Dwivedi

7,934
3
31
52

6

only it does not work on new internet-explorer (edge), needs to add it without ms- too – Saad Ahmed Jul 26 '16 at 09:34
6

See here for targeting edge: https://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet – Phyllis Sutherland Jun 28 '17 at 19:11
8

@SaadAhmed: Is that actually a problem? Edge is a reasonably well behaved browser, much better than IE anyhow, so many IE hacks probably won't be necessary (or prudent)? – Michael Scheper Jul 08 '18 at 23:43
1

Well that solved my stupid IE problems. Thanks for the fix! – Jester Sep 09 '18 at 22:00
1

@MichaelScheper This bug posted in first comment still applies in newest edge (17 for today). Saad's small fix helped me to remove this quirk. – SimonRabbit Sep 14 '18 at 11:55
Thanks, it will be working for only a particular version of IE or as whole – Hamad Dec 06 '19 at 12:35

score 110 · Accepted Answer · edited Nov 15 '17 at 23:48

110

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.

edited Nov 15 '17 at 23:48

Zze

18,229
13
85
118

answered Jun 23 '12 at 21:27

James Allardice

164,175
21
332
312

11

Is there any way to use that conditional comment inside my CSS file? I wanted to avoid cluttering up my HTML if I could help it. – FastTrack Jun 23 '12 at 21:30
2

@FastTrack - No, conditional comments are HTML comments so they have to appear in your markup. I tend to create a whole new stylesheet just for IE, and then include it as normal within the conditional comments. – James Allardice Jun 23 '12 at 21:31
James: I was thinking of doing this, but then I have to contend with updating two separate stylesheets every time I want to change something, right? – FastTrack Jun 23 '12 at 21:36
3

@FastTrack - No, your IE stylesheet would only contain styles specific to IE. Include it after your main stylesheet so you can override styles set in your main stylesheet where necessary. So you would only need to update it if you want to change something specific to IE. – James Allardice Jun 23 '12 at 21:37
James: Ok, so just to clarify - Say I include 3 different stylesheets (just for argument sake) in a 1, 2, 3 order. 3 will override 2 and 2 will override 1? – FastTrack Jun 23 '12 at 21:44
1

@FastTrack - Yes. When something is specified in more than one stylesheet, the one included later takes precedence. – James Allardice Jun 23 '12 at 21:46
Careful with conditional comment https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ – maxivis Nov 18 '15 at 20:45
Alas - conditional comment support appears to have been removed in IE10 and above. http://stackoverflow.com/a/19502136 – Damien Sawyer Sep 23 '16 at 17:59

score 56 · Answer 3 · edited May 20 '19 at 18:37

56

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

edited May 20 '19 at 18:37

Chris Barr

29,851
23
95
135

answered Jun 09 '15 at 21:18

Oriol

11,660
5
35
37

1

I'm tried `\9` and `\0/` for `display` on a class selector, but both will apply to IE10 as well. Is there any way to apply only for IE9 [and below or not]? – The Student May 11 '16 at 15:06
You can try: `\0/IE9` but haven't tested it. Otherwise I don't know any other way to target IE9 unless you use conditional clauses: `` – Oriol May 12 '16 at 00:48
1

The `@media screen and (min-width:0\0) {` hack seems to be parsed by IE11 as well - so it's not 9 and 10 only - please double-check and update your comments. – Rolf Dec 08 '16 at 14:26
I used @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { } It worked fine. – Always_a_learner Aug 02 '18 at 10:31

score 46 · Answer 4 · answered Jan 18 '17 at 08:13

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

Note that the last one listed (`min-width:0\0`) also applies to IE11 — Chris Barr, May 20 '19 at 18:39

score 27 · Answer 5 · answered Jun 23 '12 at 21:30

27

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.

answered Jun 23 '12 at 21:30

frontendzzzguy

3,242
21
31

This doesn't seem to have any effect in IE9 – FastTrack Jun 23 '12 at 21:33
I don't see why not, try .ie9 .actual-form table { width: 100%} in your CSS. Hopefully that works for you. – frontendzzzguy Jun 23 '12 at 21:39
`.ie9` doesn't work because it hasn't been updated since 2010. – Hanna Jun 07 '13 at 22:10
This is definitely the most elegant approach. Personally I prefer to add the browser css selectors server side when rendering the page. – opsb Jul 18 '13 at 11:13
1

this works if you use agent strings and dynamically add the selector class to the body. – pikapika Jan 25 '16 at 02:53

score 6 · Answer 6 · answered Jul 09 '13 at 07:48

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.

score 6 · Answer 7 · answered Aug 19 '13 at 09:15

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 */
}

Aakash · Answer 8 · 2019-04-13T02:49:02.477

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....

score 5 · Answer 9 · answered Sep 06 '19 at 07:07

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

score 4 · Answer 10 · answered Nov 13 '14 at 15:33

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.

The last one also applies to IE11 – Chris Barr May 20 '19 at 18:41 — Chris Barr, May 20 '19 at 18:41

Rahi.Shah · Answer 11 · 2017-10-26T13:21:27.893

2

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

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

Only this solution perfectly work for me.

edited Oct 26 '17 at 13:21

answered Oct 26 '17 at 13:16

Rahi.Shah

1,305
11
20

I know this is a necrocomment, but this looks super slick. However, I'm not sure what exactly it's doing as it looks a bit arcane/byzantine. Anyone know the semantics of this statement? (like the _:: and the \0 at the end?) – Adam R. Turner Dec 12 '18 at 14:10
1

Also applies the rule for Chrome :/ – trincot Jan 21 '20 at 10:29

score 2 · Answer 12 · answered May 02 '18 at 06:07

2

<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

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

answered May 02 '18 at 06:07

dxc111

21
1

Stokely · Answer 13 · 2022-08-14T22:27:28.577

How to Hide CSS from Older Browsers Like Internet Explorer

Here is a COMPLETE Javascript-free, CSS-based solution that allows you to target Internet Explorer 1-11! My solution below works by hiding IE1-7 from all your modern sheets using @import, giving IE1-7 a clean, white page layout, then uses three simple CSS media query "hacks" to isolate IE8-11 in the imported sheet. It even affects IE on Mac. And no IE conditional comments are needed.

With this solution you will never have to customize your web applications for Internet Explorer ever again, and can safely move forward using cutting edge CSS in all your websites. Best of all it requires NO JavaScript to work!!

HOW IT WORKS

First create three CSS style sheets:

"OldBrowsers.css"
"ModernBrowsers.css"
"Import.css".

The first style sheet, "OldBrowsers", is a basic element "reset" style sheet that gives all browsers, old and new, a simple white, block-level layout and where you can style all the elements for every web browser ever made. This allows 20+ years of web browsers and their elements to all use the same HTML designs and look alike. This sheet is also seen by IE1-11. Add in this sheet all basic styles needed to style the elements only. The second sheet, "ModernBrowsers.css", is where you can safely put all your modern, cutting-edge CSS that styles both the elements with HTML5 modern designs, but control layouts, etc. IE1-7 will NOT see this sheet. The third sheet is an import sheet, "Import.css", that will load the second sheet mentioned above and all your advanced CSS style sheets using a single @import rule. This hides your modern style sheet from wide range of older browsers, including IE1-7. IE1-11 will see the "Import.css" sheet, but IE1-7 will not see "ModernBrowsers.css" sheet because of the @import rule.

<link media="screen" rel="stylesheet" type="text/css" href="OldBrowsers.css" />
<link media="screen" rel="stylesheet" type="text/css" href="Import.css" />

In your "Import.css" sheet add this @import rule exactly as formatted below. This "ModernBrowsers.css" sheet will be hidden from IE1-7 and a wide range of older browsers listed below:

@import 'ModernBrowsers.css' all;

All CSS in this imported sheet will be hidden from Internet Explorer 1-7 and a wide range of older browsers. IE1-7, and a wide range or older browsers, do not understand media type "all", nor the specific @import format shown above, so will fail to import this sheet. This specific version of import is not recognized by many older browsers (pre-2001). Those browsers are so old now, you just need to deliver them a clean white web page with stacked blocks of content.

The CSS you add to "OldBrowsers" allows you to set up old browsers and IE1-7 to use plain styling you control. I personally add only HTML "reset" element styling in this sheet and make sure all the HTML5 elements have simple clean designs. Newer browsers will cascade over these in the "ModernBrowsers.css" style sheet.

In "ModernBrowsers.css" you want to add all your modern styles, but also have special CSS hacks to target Internet Explorer 8-11 using CSS media queries (alongside all your normal selectors and classes). Simply add the following IE-only fixes to your modern style sheet to target these last specific IE browsers. Drop into these blocks any styles specific to these old IE browsers.

Note: Keep in mind HTML5 and most of CSS3 is generally supported starting with Internet Explorer 9 through 11. But there are bugs, missing element support, and other issues with IE8-11 and even the Trident Edge browsers miss. But you now can safely target these older IE 8-11 browsers this way, while using your cutting-edge CSS inside this sheet for all other modern browsers going forward:

/* IE8 */
@media \0screen {
    body {
        background: red !important;
    }
}

/* IE9 */
@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
    body {
        background: blue !important;
    }
}

/* IE10-11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    body {
        background: green !important;
    }
}

Simple! You have now targeted styles for IE1-11 (all Internet Explorer browsers!)

With this solution you achieve the following:

The @import excludes IE 1-7 from your modern styles, completely! Those agents, along with the list below, will never see your modern imported styles and get a clean white style sheet content page older browsers can still use as far as viewing your content (use "OldBrowsers.css" to style them). The following browsers are excluded from "ModernBrowsers.css" using the above @import rule:
- Windows Internet Explorer 1-7.x
- Macintosh Internet Explorer 1-5.x
- Netscape 1-4.8
- Opera 1-3.5
- Konqueror 1-2.1
- Windows Amaya 1-5.1
- iCab 1-2
- OmniWeb
In your "ModernBrowsers" imported sheet, you can now safely target IE browsers version 8-11 using simple media query "hacks".
This system uses a simple @import style sheet system that is fast and manageable using traditional, non-support for external style rules rather than CSS fixes sprinkled throughout multiple sheets. (BTW...Do not listen to anyone saying @import is slow, as it is not. My import sheet has ONE LINE and is maybe a kilobyte or less in size! @import has been used since the birth of the WWW and is no different than a simple CSS link. Compare this to the Megabytes of Javascript kids today are shoving into browsers using these new "modern" ECMAScript SPA API's just to display a tiny paragraph of news!) One @import line now separates years and years of IE browser version from your newer CSS code and fancy layout designs. No scripting needed!
All old IE browsers and a wide range of other user agents are excluded from modern styles now using this import strategy, which allows these older browsers to collapse back to plain, "block-level", white pages and stacked content layouts that are fully accessible by older browsers. You can now spend MINIMAL time customizing your content for old browsers and instead let them see plain white stacked content pages for thousands of pages in your website!
Notice this solution has no IE conditional comments! You should NEVER use those since IE 10-11 no longer support IE conditionals.
With this solution, your modern web designs are now 100% free to use custom, cutting-edge CSS3 technologies without having to ever worry about older browsers and IE1-11 ever again!
Linked CSS has very wide support, even in older CSS1 browsers going back to 1995. It is just one more reason to NOT USE EMBEDDED or "style" element styles. Use these linked CSS designs, instead.
If you added a really good set of "reset" or element styles into the "OldBrowsers" style sheet, 20+ years of old and new browsers and their basic element designs will allow your core web page design to look the same using that one sheet. The idea with "reset" element CSS is to force all browsers through history, and their shared HTML element support, to look the same BEFORE you apply CSS layouts, scripting, and fancier CSS designs. The HTML basic elements have change very little in the past 25 years. So styling elements first to simplify text content display makes sense.

This is part of the new "progressive" CSS, 100% JavaScript-free, design concept in 2021 for addressing cross-browser style issues, where older agents are allowed to degrade gracefully to simpler layouts rather than struggling to fix problems in cryptic old, broken, box-model agents (IE5-6) in a piecemeal fashion to match complex CSS layouts. Most older web browsers do NOT need to recreate your custom layouts any longer. They just need to display basic text and media content. With the long tail of their slow demise online, IE 1-11 just need simple layout designs so the content is readable and accessible.

The advantage to this strategy is its 100% Javascript-free! You should NOT be using scripting to manage CSS in web browsers in 2021, anyway. I recommend you dump Modernizr and all "polyfills" and try my clean CSS solution instead when managing Internet Explorer in web browsers. My solution is effective in targeting IE1-11, giving you complete control over how you customize CSS for those targeted browsers, while freeing you up as a designer to focus on newer CSS3 and cutting-edge styles and layouts in Edge and all other modern HTML5 browsers going forward. I have been using a version of this since 2004, but recently updated it for 2021.

It's my hope we stop creating these gigantic, multi-megabyte, CPU-hog, JavaScripted, polyfill nightmare scripted solutions for addressing what used to be solved years ago with a few lines of simple Cascading Style Sheet code. :)

You can get my complete Universal CSS Framework from Git for free, which uses this same code plus even more goodies!

Apply style ONLY on IE

13 Answers13

Welcome BrowserDetect - an awesome function.

How to Hide CSS from Older Browsers Like Internet Explorer

Linked

Related