How to write a CSS hack for IE 11? [duplicate]

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?

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 — grimmus, Commented Dec 12, 2013 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. 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, Commented Dec 12, 2013 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, Commented Aug 3, 2017 at 20:12

Abraham · Accepted Answer · 2020-01-23 22:32:20Z

321

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

edited Jan 23, 2020 at 22:32

Abraham

9,4876 gold badges54 silver badges57 bronze badges

answered Feb 28, 2014 at 2:53

Paul Sweatte

24.5k7 gold badges130 silver badges267 bronze badges

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...
– Realto619
Commented Apr 11, 2014 at 19:52
8

For me, this only worked after removing the comma in the ie11 hack, e.g. *::-ms-backdrop .foo...
– jasonbradberry
Commented Apr 21, 2014 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
Commented Apr 14, 2015 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
Commented Aug 23, 2017 at 20:59

Add a comment |

mhenry1384 · Accepted Answer · 2019-04-26 14:45:37Z

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

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, Commented Jun 16, 2014 at 16:19
@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, Commented Jun 16, 2014 at 16:23
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, Commented Jun 24, 2014 at 10:11
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, Commented Aug 7, 2014 at 20:06
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, Commented Sep 11, 2014 at 8:49

Hbirjand · Accepted Answer · 2014-10-08 02:56:56Z

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 8, 2014 at 2:56

answered Apr 1, 2014 at 13:58

Hbirjand

1,95519 silver badges25 bronze badges

Thanks for reposting my ie11 one most likely from our shared work on browserhacks. +1!
– Jeff Clayton
Commented Dec 11, 2014 at 5:15
1

Does this still work in 2016? Not for me.
– Scott Simpson
Commented Sep 1, 2016 at 18:16
@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
Commented Sep 20, 2016 at 8: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
Commented Sep 20, 2016 at 8:53

Add a comment |

Jeff Clayton · Accepted Answer · 2017-04-04 13:31:04Z

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 4, 2017 at 13:31

answered Jul 26, 2014 at 19:32

Jeff Clayton

7,2311 gold badge32 silver badges37 bronze badges

1

@Jeff Clayton,Thanks for your great efforts on BrowserHacks.1+
– Hbirjand
Commented Dec 14, 2014 at 7:49
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.
– BoltClock
Commented Aug 14, 2015 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
Commented Aug 14, 2015 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
Commented Aug 15, 2015 at 4:33
Interesting and in-depth answer @BoltClock on the animation code, worth viewing the link.
– Jeff Clayton
Commented Aug 15, 2015 at 10:03

Add a comment |

hoooman · Accepted Answer · 2014-03-27 21:18:11Z

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.

its not working for me
– sravan ganji
Commented Oct 17, 2018 at 15:43 — sravan ganji, Commented Oct 17, 2018 at 15:43

HDT · Accepted Answer · 2014-07-22 04:44:02Z

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.

Community · Accepted Answer · 2017-05-23 12:10:45Z

0

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/

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Feb 9, 2014 at 14:44

Liko

2,23020 silver badges21 bronze badges

Add a comment |

ikke aviy · Accepted Answer · 2014-03-17 06:46:42Z

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, 2014 at 6:46

ikke aviy

417 bronze badges

1

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

Add a comment |

Collectives™ on Stack Overflow

How to write a CSS hack for IE 11? [duplicate]

8 Answers 8

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

Not the answer you're looking for? Browse other questions tagged
css
css-selectors
internet-explorer-11
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

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

Footnote

Attribution / Essential Reading

Not the answer you're looking for? Browse other questions tagged csscss-selectorsinternet-explorer-11 or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
css
css-selectors
internet-explorer-11
or ask your own question.