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 [BrowserHacks.com] 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 BrowserHacks.com 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; }

 

About Jeff Clayton

IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com 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: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io

‹ Firefox CSS Hacks Collection

CSS for Hi-Def Mobile “Retina” Devices ›

Tagged with: Browser, CSS, CSS Hacks, Hacks, Internet Explorer, MSIE, Programming, Web Browser, Web Programming
Posted in Computers, Cool Code, CSS, CSS Hacks, Hacks, Internet Explorer, Internet Explorer-All, Microsoft, Software