How to write a CSS hack for IE 11?

Question

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?

Interesting to read -> http://www.neowin.net/news/ie11-to-appear-as-firefox-to-avoid-legacy-ie-css — Morpheus, Dec 12 '13 at 10:57
I initially posted an answer suggesting the usage of conditional comments but @ExtPro explained that they were dropped in IE10 - http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx — grimmus, Dec 12 '13 at 11:04
Rather than using browser detection to target IE, it is better to use **feature detection** to check what's wrong with IE11 using [Modernizr](http://modernizr.com/). 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. — Bobby, Dec 12 '13 at 11:59
@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... — Jan Kyu Peblik, Aug 03 '17 at 20:12

score 321 · Accepted Answer · edited Jan 23 '20 at 22:32

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

Using Paul Sweatte's example as inspiration, I created a nice little IE Sniffer that works for IE 6-11: http://jsfiddle.net/Realto619/HfuXT/ Hopefully someone else finds it useful as well... — Realto619, Apr 11 '14 at 19:52
For me, this only worked after removing the comma in the ie11 hack, e.g. `*::-ms-backdrop .foo...` — jasonbradberry, Apr 21 '14 at 11:16
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. — wortwart, Apr 14 '15 at 11:13
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? — daniel.caspers, Aug 23 '17 at 20:59

score 283 · Answer 2 · edited Apr 26 '19 at 14:45

283

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

or

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

or

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

IE 7

*+html .foo {property:value;}

or

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

or

.foo { *property:value;}

or

.foo { #property:value;}

IE 6, 7 and 8

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

IE 6

* html .foo {property:value;}

or

.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

edited Apr 26 '19 at 14:45

mhenry1384

7,538
5
55
74

answered Dec 12 '13 at 11:08

SW4

69,876
20
132
137

14

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 Jun 16 '14 at 16:19
1

@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. – SW4 Jun 16 '14 at 16:23
5

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. – hurrtz Jun 24 '14 at 10:11
1

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 – TwinPrimesAreEz Aug 07 '14 at 20:06
1

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... – Boaz Sep 11 '14 at 08:49
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 http://browserstrangeness.bitbucket.org/css_hacks.html or our shared work at http://browserhacks.com for proof. I am working to target as many versions as I can. As stated use good CSS first. – Jeff Clayton Dec 11 '14 at 05:01
@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! – SW4 Dec 11 '14 at 08:32
@Jeff Clayton,Thanks for your great efforts on BrowserHacks.1+ – Hbirjand Dec 14 '14 at 07:48
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 :) – sohaiby Sep 13 '15 at 08:07
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)`? – Nick Aug 15 '16 at 20:19
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. – Jeff Clayton Apr 18 '17 at 20:17
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 https://gist.github.com/vidaaudrey/c16774076391d09e7ec7dbb7ed7a3189 the last hack (`ie10 and ie11`) seams to be done the job for me – angularrocks.com Aug 29 '17 at 01:13
`@media screen\0` is showing up on a BrowserStack IE11. Are you sure it doesn’t target it as well? – gnclmorais Feb 06 '18 at 10:37
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. – mgol Apr 10 '18 at 17:39

Hbirjand · Answer 3 · 2014-10-08T02:56:56.140

69

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

edited Oct 08 '14 at 02:56

answered Apr 01 '14 at 13:58

Hbirjand

1,945
19
25

Thanks for reposting my ie11 one most likely from our shared work on browserhacks. +1! – Jeff Clayton Dec 11 '14 at 05:15
1

Does this still work in 2016? Not for me. – Scott Simpson Sep 01 '16 at 18:16
@ScottSimpson did you try the IE11 hack below as well or just the javascript+css combo above? Please check http://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 Sep 20 '16 at 08:52
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 Sep 20 '16 at 08:53

Jeff Clayton · Answer 4 · 2017-04-04T13:31:04.293

30

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

edited Apr 04 '17 at 13:31

answered Jul 26 '14 at 19:32

Jeff Clayton

7,053
1
31
36

You got it Jeff, thanks! – JohnA10 Oct 29 '14 at 22:21
1

@Jeff Clayton,Thanks for your great efforts on BrowserHacks.1+ – Hbirjand Dec 14 '14 at 07:49
Just used this in [an answer](http://stackoverflow.com/questions/32015500/ie10-css-hack-for-animation-rules/32017024#32017024) - 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. – BoltClock Aug 14 '15 at 19:08
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. – Jeff Clayton Aug 14 '15 at 23:20
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.) – BoltClock Aug 15 '15 at 04:33
Interesting and in-depth answer @BoltClock on the animation code, worth viewing the link. – Jeff Clayton Aug 15 '15 at 10:03

score 7 · Answer 5 · answered Mar 27 '14 at 21:18

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.

score 2 · Answer 6 · answered Jul 22 '14 at 04:44

So I found my own solution to this problem in the end.

After searching through Microsoft documentation I managed to find a new IE11 only style msTextCombineHorizontal

In my test, I check for IE10 styles and if they are a positive match, then I check for the IE11 only style. If I find it, then it's IE11+, if I don't, then it's IE10.

Code Example: Detect IE10 and IE11 by CSS Capability Testing (JSFiddle)

I will update the code example with more styles when I discover them.

NOTE: This will almost certainly identify IE12 and IE13 as "IE11", as those styles will probably carry forward. I will add further tests as new versions roll out, and hopefully be able to rely again on Modernizr.

I'm using this test for fallback behavior. The fallback behavior is just less glamorous styling, it doesn't have reduced functionality.

score 0 · Answer 7 · edited May 23 '17 at 12:10

You can use js and add a class in html to maintain the standard of conditional comments:

  var ua = navigator.userAgent,
      doc = document.documentElement;

  if ((ua.match(/MSIE 10.0/i))) {
    doc.className = doc.className + " ie10";

  } else if((ua.match(/rv:11.0/i))){
    doc.className = doc.className + " ie11";
  }

Or use a lib like bowser:

https://github.com/ded/bowser

Or modernizr for feature detection:

http://modernizr.com/

score 0 · Answer 8 · answered Mar 17 '14 at 06:46

0

I found this helpful

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
    <script>
    $(function(){
        $('html').addClass('ie11');
    });
    </script>
<?php } ?>

Add this under your <head> document

answered Mar 17 '14 at 06:46

ikke aviy

41
7

1

You're using PHP and jQuery, neither of which you've listed as dependencies for this answer, I suggest you update it. – scragar Jun 16 '14 at 16:21

How to write a CSS hack for IE 11?

8 Answers8

IE 11 (and above..)

IE 10 and above

IE 10 only

IE 9 and above

IE 9 and 10

IE 9 only

IE 8,9 and 10

IE 8 Standards Mode Only

IE 8

IE 7

IE 6, 7 and 8

IE 6 and 7

IE 6, 7 and 8

IE 6

Javascript alternatives

Modernizr

User agent selection

Footnote

Attribution / Essential Reading

Linked

Related