How to write a CSS hack for IE 11?

css css-selectors internet-explorer-11 css-hack

442,899

Solution 1

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>

References

Solution 2

In the light of the evolving thread, I have updated the below:

IE 11 (and above..)

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

IE 10 and above

_:-ms-lang(x), .foo { property:value; }

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

IE 10 only

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

IE 9 and above

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  //.foo CSS
  .foo{property:value;}
}

IE 9 and 10

@media screen and (min-width:0\0) {
    .foo /* backslash-9 removes.foo & old Safari 4 */
}

IE 9 only

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 //.foo CSS
 .foo{property:value;}
}

IE 8,9 and 10

@media screen\0 {
    .foo {property:value;}
}

IE 8 Standards Mode Only

.foo { property /*\**/: value\9 }

IE 8

html>/**/body .foo {property:value;}

@media \0screen {
    .foo {property:value;}
}

IE 7

*+html .foo {property:value;}

*:first-child+html .foo {property:value;}

IE 6, 7 and 8

@media \0screen\,screen\9 {
    .foo {property:value;}
}

IE 6 and 7

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

.foo { *property:value;}

.foo { #property:value;}

IE 6, 7 and 8

@media \0screen\,screen\9 {
    .foo {property:value;}
}

IE 6

* html .foo {property:value;}

.foo { _property:value;}

Javascript alternatives

Modernizr

Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element

User agent selection

Javascript:

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

Adds (e.g) the below to html element:

data-useragent='Mozilla/5.0 (compatible; M.foo 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

Allowing very targetted CSS selectors, e.g.:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

Footnote

If possible, identify and fix any issue(s) without hacks. Support progressive enhancement and graceful degradation. However, this is an 'ideal world' scenario not always obtainable, as such- the above should help provide some good options.

Attribution / Essential Reading

Solution 3

Here is a two steps solution here is a hack to IE10 and 11

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

because IE10 and IE11 Supports -ms-high-cotrast you can take the advantage of this to target this two browsers

and if you want to exclude the IE10 from this you must create a IE10 specific code as follow it's using the user agent trick you must add this Javascript

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

and this HTML tag

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

and now you can write your CSS code like this

html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

for more information please refer to this websites,wil tutorail, Chris Tutorial

And if you want to target IE11 and later,here is what I've found:

_:-ms-fullscreen, :root .selector {}

Here is a great resource for getting more information: browserhacks.com

Solution 4

I have been writing these and contributing them to BrowserHacks.com since the fall of 2013 -- this one I wrote is very simple and only supported by IE 11.

<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>

and of course the div...

<div class="msie11">
    This is an Internet Explorer 11 CSS Hack
<div>

So the text shows up in blue with internet explorer 11. Have fun with it.

More IE and other browser CSS hacks on my live test site here:

UPDATED: http://browserstrangeness.bitbucket.io/css_hacks.html

MIRROR: http://browserstrangeness.github.io/css_hacks.html

(If you are also looking for MS Edge CSS Hacks, that is where to go.)

Solution 5

You can use the following code inside the style tag:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
/* IE10+ specific styles go here */  
}

Below is an example that worked for me:

<style type="text/css">

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
   #flashvideo {
        width:320px;
        height:240;
        margin:-240px 0 0 350px;
        float:left;
    }

    #googleMap {
        width:320px;
        height:240;
        margin:-515px 0 0 350px;
        float:left;
        border-color:#000000;
    }
}

#nav li {
    list-style:none;
    width:240px;
    height:25px;
    }

#nav a {
    display:block;
    text-indent:-5000px;
    height:25px;
    width:240px;
    }
</style>

Please note that since (#nav li) and (#nav a) are outside of the @media screen ..., they are general styles.

View more solutions

442,899

user2135651

Updated on January 24, 2020

Comments

user2135651 over 4 years

How can I hack or write css only for IE 11? I have a website that looks bad in IE 11.I just search here and there but didnt find any solution yet.

Is there any css selector?
- Morpheus over 10 years
  
  Interesting to read -> neowin.net/news/…
- grimmus over 10 years
  
  I initially posted an answer suggesting the usage of conditional comments but @ExtPro explained that they were dropped in IE10 - msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
- Danield over 10 years
  
  if it would detect ie9+ would that also work for you?
- Bobby over 10 years
  
  Rather than using browser detection to target IE, it is better to use feature detection to check what's wrong with IE11 using Modernizr. If you give us the link to your website or elaborate your problem, I think some of us could help you to find out what's wrong with your site.
- Jan Kyu Peblik almost 7 years
  
  @Danield that's actually a fairly different question, if you read the whole thing. That question truly wants to distinguish between IE10 & IE11, while this one only IE11. It's subtle but important. Anyway...
Realto619 about 10 years

Using Paul Sweatte's example as inspiration, I created a nice little IE Sniffer that works for IE 6-11: jsfiddle.net/Realto619/HfuXT Hopefully someone else finds it useful as well...
jasonbradberry about 10 years

For me, this only worked after removing the comma in the ie11 hack, e.g. *::-ms-backdrop .foo...
scragar almost 10 years

This would be great if IE actually followed the standards well enough to be trustworthy, but they don't. There's a reason why IE specific hacks exist and it's because although every version of IE is a mile better than the previous it still doesn't have enough standards support and few enough quirks to be treated as a standards compliant browser.
scragar almost 10 years

You're using PHP and jQuery, neither of which you've listed as dependencies for this answer, I suggest you update it.
SW4 almost 10 years

@scragar - the above suggests hacks aren't used if it is possible to avoid them, not that you should never use them whatsoever- I would tend to ask, is it a substitute to replace perceived 'broken functionality' with what is effectively 'broken code'? I would argue it isnt.
hurrtz almost 10 years

Although I absolutely agree, one cannot fix every problem. It just is not possible. For example: IE11 has problems in rendering the height and width of an element when applying border-radius. True story. So you might find yourself in a situation where you know that you are writing correct code whereas one specific browser has a bug hence generating the necessity of using such a hack.
TwinPrimesAreEz almost 10 years

It`s really strange how IE is always the worst of the major browsers, without exception. @SW4, would you consider the following "broken code"? @media only screen and (max-width: 48em){.somestyle{width:28em;}}...because on IE 11 mobile the browser auto-zooms in so the element is not viewable even though a monkey could see it SHOULD be viewable
Boaz over 9 years

In a perfect world, we would be able to code perfectly. As it stands, IE's rendering (even version 11!) often defies both logic and standard. This has been the case for over a decade now. For this reason, a broken browser requires broken code to mask the underlying problem - the browser itself. If Microsoft just adopt WebKit, we would be able to stop using such hacks, but until then...
JohnA10 over 9 years

You got it Jeff, thanks!
Jeff Clayton over 9 years

Thank you @SW4 for including my ie9, ie10, and ie11 hacks here...+1! Whether or not you realize those were my creations, no matter -- glad to see my efforts have not been wasted. It is for you all that I do it (and I like solving puzzles)... Honestly - everyone should realize that hacks have always existed for all major browsers. IE is by far not the only one. Check SW4's reference links, my test site at browserstrangeness.bitbucket.org/css_hacks.html or our shared work at browserhacks.com for proof. I am working to target as many versions as I can. As stated use good CSS first.
Jeff Clayton over 9 years

Thanks for reposting my ie11 one most likely from our shared work on browserhacks. +1!
SW4 over 9 years

@JeffClayton - many thanks Jeff, I was unaware you were the original source, no offense intended, I've added yourself and browserhacks. Many thanks for your ongoing work!
Hbirjand over 9 years

@Jeff Clayton,Thanks for your great efforts on BrowserHacks.1+
Hbirjand over 9 years

@Jeff Clayton,Thanks for your great efforts on BrowserHacks.1+
wortwart about 9 years

The detection works fine but you still have to check for selector specificity. Putting something like :root before the IE specific selectors fixes the problems.
BoltClock over 8 years

Just used this in an answer - thought I'd ask, does the \9 hack work consistently for most properties on IE10? It doesn't work in IE11 in 10 mode, and I don't have an actual copy of IE10 to test, which is what led me to using this to target IE11 alongside IE10+11.
Jeff Clayton over 8 years

It did for me, I hit F12 and changed the document mode to IE10 in the emulation settings - I am using Win10pro-64bit. Are you changing the user agent string instead? I previously tested it in Xp all the way to Win8.1 and found IE6-10 all worked properly with slash-9 as in this one: .selector { property:value\9; } My IE11 UAGENT in case of differences with yours: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko - though the user agent has no effect, just using that to see if your IE11 or Win10 version is somehow different natively.
BoltClock over 8 years

OK, I got it working in a blank page... now it works for IE11 in edge mode. I'm stumped. (I also fixed the link in my previous comment - somehow I was linking back to this answer instead.)
Jeff Clayton over 8 years

Interesting and in-depth answer @BoltClock on the animation code, worth viewing the link.
sohaiby over 8 years

Thanks alot.. I was using the same class name as you wrote .ie9up as parent class (.ie9up .btnSearch {...}) and was wondering why my code isn't working... then I figured it out, and removed it :)
Nick over 7 years

For the media queries, why is screen or all needed? For example, for the "IE 10 and above" one, why is it @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and not just @media (-ms-high-contrast: none), (-ms-high-contrast: active)?
Scott Simpson over 7 years

Does this still work in 2016? Not for me.
Jeff Clayton over 7 years

@ScottSimpson did you try the IE11 hack below as well or just the javascript+css combo above? Please check browserstrangeness.bitbucket.org/css_hacks.html to see if the ie11 one is working natively for you. The raw css-only ie10-11 media query above should still work and combining that with the ie11 one to separate ie10 from ie11 within the media query (without the javascript) should work as well.
Jeff Clayton over 7 years

example: @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .selector { IE10-11 specific styles go here } _:-ms-fullscreen, :root .selector { IE11 specific styles go here } }
Jeff Clayton about 7 years

Only a few hacks (an example being any regarding negation css media queries eg.: not all and...) require 'all' -- but people need screen if they are writing css that should not affect print or other media types.
daniel.caspers over 6 years

The .foo {color: green} seemed to work both in IE10 and IE11 for me? If that proves true for you @Paul Sweatte, perhaps update the comment in the code snippet?
angularrocks.com over 6 years

say if i just need to hack ie11 only (not up, or ie11 and any version numbers down) what is the best approach? I just looked in to this one gist.github.com/vidaaudrey/c16774076391d09e7ec7dbb7ed7a3189 the last hack (ie10 and ie11) seams to be done the job for me
gnclmorais over 6 years

@media screen\0 is showing up on a BrowserStack IE11. Are you sure it doesn’t target it as well?
mgol about 6 years

For IE 11 the following should be enough: :-ms-fullscreen, .ie11up { property:value; }. There's no need for the underscore before the :-ms-fullscreen pseudo-class and there's no need for the :root prefix. In fact, prepending :root to all selectors will mean it's not possible to apply IE styles to :root itself unless a more sophisticated logic is achieved.
sravan ganji over 5 years

its not working for me
NAMS about 5 years

this was very helpful, thank you.