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

User · Accepted Answer

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.

_x000D_

<!doctype html>_x000D_
<html>_x000D_
 <head>_x000D_
  <title>IE10/11 Media Query Test</title>_x000D_
  <meta charset="utf-8">_x000D_
  <meta http-equiv="X-UA-Compatible" content="IE=edge">_x000D_
  <style>_x000D_
    @media all and (-ms-high-contrast:none)_x000D_
     {_x000D_
     .foo { color: green } /* IE10 */_x000D_
     *::-ms-backdrop, .foo { color: red } /* IE11 */_x000D_
     }_x000D_
  </style>_x000D_
 </head>_x000D_
 <body>_x000D_
  <div class="foo">Hi There!!!</div>_x000D_
 </body>_x000D_
</html>

_x000D_

References

User · Answer

I found this helpful    lt  php if  strpos   SERVER  HTTP USER AGENT     Trident 7 0  rv 11 0       false      gt       lt script gt        function               html   addClass  ie11                 lt  script gt   lt  php     gt    Add this under your  lt head gt  document

User · Answer

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    lt html data-useragent  Mozilla 5 0  compatible  MSIE 10 0  Windows NT 6 2  Trident 6 0   gt    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

User · Answer

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

User · Answer

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

User · Answer

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    lt style type  text css  gt    -ms-fullscreen   root  msie11   color  blue     lt  style gt    and of course the div      lt div class  msie11  gt      This is an Internet Explorer 11 CSS Hack  lt div gt    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

User · Answer

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    lt style type  text css  gt    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         lt  style gt    Please note that since   nav li  and   nav a  are outside of the  media screen      they are general styles

User · Answer

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  amp  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 gt     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   Jeff Clayton   Browserhacks com Keith Clarke Paul Irish Web Devout The Spanner

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

Examples related to css

Examples related to css-selectors

Examples related to internet-explorer-11

Examples related to css-hack