Internet Explorer CSS Hacks Collection

These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [] where I sent new hacks and test submissions for the site.

In addition to Firefox, I have also been testing and even creating new CSS Formatting “Hacks” to fix browser bugs in Internet Explorer. Again, some of my work has been added to already. This is a mix of my own hacks and others I have found that are useful. Here is the complete Internet Explorer collection so far. Where possible I am showing what resources I used to find or create these if you would like to research these further.

Looking for an ‘All-MSIE’ hack is very hard – but I have gotten closer. This combination works for all versions 6-11 except crazy IE 8 (I don’t have a version of 5.5 any more but probably works in that one too) so here is the combination I worked out that is for every MSIE but IE8:

/* Internet Explorer 11- (All but IE8) */

@media screen and (min-width:0\0) and (min-resolution:+72dpi), \0screen\,screen\9 {
    .selector { property:value; }

Internet Explorer 9,10,and 11 underscore hacks are my own creation. There were no MSIE 11 CSS hacks, and only a media query for 10+ at the time, so this was the result of much testing and following hunches:

/* Internet Explorer 11 */

_:-ms-fullscreen, :root .selector { property:value; }

Since I posted these, here is a different one I found on the net and modified. The original did not rule out Internet Explorer 7, so I edited it slightly to rule out that that browser. The above hack is better so this one is only here for interest. This -ms-backdrop hack also picks up old versions of Chrome and Internet Explorer so again, not my favorite:

/* Internet Explorer 11 (And Chrome 10-24, Safari 5.1-6.0) */

*::-ms-backdrop, :root .selector { property:value; }

Now for my IE10 set…

/* Internet Explorer 10-11 */

_:-ms-input-placeholder, :root .selector { property:value; }

Here is a newer one I came up with… (Always on the lookout for less-wordy hacks)

/* Also for Internet Explorer 10-11 (and MS Edge) */

_:-ms-lang(x), .selector { property:value; }
/* Internet Explorer 10 (only) */

_:-ms-lang(x), .selector { property:value\9; }

While not my creation, the famous media query for IE 10+ is worth keeping around:

/* Internet Explorer 10-11 */

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

If you want it to cover ONLY Internet Explorer 10, use the slash 9 as above in my own single-line IE 10 hack to limit it as well for the same purpose:

/* Internet Explorer 10 */

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

All of the Internet Explorer 9 and 9+ hacks here are my own creations. There weren’t any I could find at the time, and the idea of using a conditional comment doesn’t really appeal since it requires complete segregation and cannot be included on a style sheet. So like the MSIE 10 and 11 underscore hacks, these were the result of long effort (and a little luck) in testing until I found the right combinations.

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

_::selection, .selector { property:value\0; }
/* Internet Explorer 9+ (another method) */

@media screen\0 { _::selection, .selector { property:value; } }
/* Internet Explorer 9+ (straight media query) */

@media screen and (min-width:0\0) and (min-resolution:+72dpi) {
    .selector { property:value; } 
/* Internet Explorer 9 (only) (straight media query) */

@media screen and (min-width:0\0) and (min-resolution:.001dpcm) {
    .selector { property:value; } 
/* Anything but Internet Explorer 8 (or 6-) */

_:root, .selector { property:value; }

The below are primarily from sites around the net such as Keith Clark’s page, but included for completeness since I had been testing them anyway:

/* Internet Explorer 8+ (And old Firefox 1.x) */

@media screen\0 { .selector { property:value; } }
/* Internet Explorer 8 (only) (...and old Firefox 1.x) */

@media \0screen { .selector { property:value; } }
/* Internet Explorer 6-8 (8-) */

@media \0screen\,screen\9 { .selector { property:value; } }
/* Internet Explorer 7 (only) */

*+ html .selector { property:value; }
/* Internet Explorer 7- */

.selector, { property:value; }
/* Internet Explorer 6-7 (7-) */

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

People used to use Internet Explorer Conditional Comments, but those are no longer viable since they are not supported in Internet Explorer 10 and above. A while back I found a few hacks that work for Firefox so combining one with one of the above queries one can block it like so:

/* Internet Explorer 8+ (And block Firefox) */

@media screen\0 
    /* Internet Explorer 8+ */

    .selector { property:value; }

    /* Block Firefox */

     _:-moz-tree-row(hover), .selector { property:value; }

A couple more of my own for completeness and keeping them in order…

/* Anything but Internet Explorer 7- */

_:lang(x), .selector { property:value; }
/* Anything but Internet Explorer 6- */

_css-text, .selector { property:value; }
/* Internet Explorer 6- */

* html .selector { property:value; }
/* Internet Explorer 6- */

.selector { _property:value; }

I edited this old one just for the heck of it, because I wanted to see what would happen. It is too out of date to matter, but the \9 removes IE 5.X and below… feeding my need to be thorough… and for fun…

/* Internet Explorer 6 (only) */

.selector { _property:value\9; }

Why stop with that… I tried this as well and got the same result:

/* Internet Explorer 6 (only) */

.selector { _prop\erty:value; }

And this old one, again for completeness…

/* Anything but Internet Explorer 5- */

.selector { prop\erty:value; }



IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind. See Test Pages: and

Tagged with: , , , , , , , ,
Posted in Computers, Cool Code, CSS, CSS Hacks, Hacks, Internet Explorer, Internet Explorer-All, Microsoft, Software
8 comments on “Internet Explorer CSS Hacks Collection
  1. […] you Mrunal for the suggestion! Specific Internet Explorer Hacks can be found on my Internet Explorer CSS Hacks […]


  2. Ernesto says:

    You are the master of masters. Thank you.


  3. Jeff Clayton says:

    Just added an ‘all Internet Explorer except IE8’ css hack – 6-11 (all!) — maybe even 5.5 if anyone still has that old thing to test it…


  4. Mahi says:

    Nice, if i include the IE 10 specifics, would it work for chrome and firefox on its own or i need to give selector and propoerty value again for other browsers.


    • Jeff Clayton says:

      The idea here is to apply CSS that only targets the browser or browsers listed in the comments. Any CSS within the hack should have no effect on other browsers at all, as the attempt is to segregate the code. The basic plan is to set general CSS in the top of your CSS page, and then below that (after the general code) place a CSS hack if needed to affect browsers that are not showing the proper CSS that the others are.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: