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 · 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

Use a combination of Microsoft specific CSS rules to filter IE11    lt  doctype html gt   lt html gt    lt head gt     lt title gt IE10 11 Media Query Test lt  title gt     lt meta charset  utf-8  gt     lt meta http-equiv  X-UA-Compatible  content  IE edge  gt     lt style gt       media all and  -ms-high-contrast none               foo   color  green      IE10            -ms-backdrop   foo   color  red      IE11              lt  style gt    lt  head gt    lt body gt     lt div class  foo  gt Hi There    lt  div gt    lt  body gt   lt  html gt    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   x000D   lt  doctype html gt  x000D   lt html gt  x000D    lt head gt  x000D     lt title gt IE10 11 Media Query Test lt  title gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta http-equiv  X-UA-Compatible  content  IE edge  gt  x000D     lt style gt  x000D       media all and  -ms-high-contrast none  x000D         x000D        foo   color  green      IE10    x000D          -ms-backdrop   foo   color  red      IE11    x000D         x000D     lt  style gt  x000D    lt  head gt  x000D    lt body gt  x000D     lt div class  foo  gt Hi There    lt  div gt  x000D    lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    References   How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code  Microsoft Extensions to CSS CSS 2 1 Rule sets  declaration blocks  and selectors

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

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

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

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

[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