Find a CSS hack for each version of IE and Edge

IE CSS Hacks: IE6, 7, 8, 9, 10, 11, Edge.md

IE CSS Hacks: IE6, 7, 8, 9, 10, 11, and even Edge

I always struggle with hacks for Edge and IE. See also for other tips: http://browserhacks.com/

IE6 Only

_selector {...}

IE6 & IE7

*html or { _property: }

IE7 Only

*+html or { *property: }

Keep in mind that you have to put the IE7 property first within the same selector.

IE8

.selector/*\**/ { color:#f00; }

note: LESS v1.5.0 shoots out an error when compiling the CSS if you use this hack :/

IE8 and IE9

.selector { color:#f00\9; }

See http://stackoverflow.com/questions/660652/ie8-css-selector for more detail.

The above solution doesn't work with font-family, so instead you need to use \0/ !important Example: { font-family:Arial \0/ !important; } See http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

Also, using \9 is picked up by IE10 and IE11 so you need to redeclare the CSS rules with -ms-high-contrast:. See info below.

IE9 Only

:root .class/#id { property:value \0/IE9; }

NOTE: Prepos v4.0.1 shoots out an error when compiling the CSS if you use this hack :/ See http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx

IE10 Only

Method 1:

UA Sniffing, which isn't the most loved method to target browsers, but here it is anyway. http://css-tricks.com/ie-10-specific-styles/

Place this script in the :

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

Usage in CSS:

html[data-useragent*='MSIE 10.0'] .selector {...}

Method 2: It used 'Conditional compilation' which is not UA sniffing. Also, it excludes IE11 as well.

http://www.impressivewebs.com/ie10-css-hacks/ Conditional compilation: https://msdn.microsoft.com/en-us/library/8ka90k2e(v=vs.94).aspx

Place this script in the :

<!--[if !IE]><!-->
<script>
  if (/*@cc_on!@*/false && document.documentMode === 10) {
    document.documentElement.className+=' ie10';
  }
</script>
<!--<![endif]-->

Note: Seems the Conditional Comment is not necessary, but I like to include it for godo measure.

Usage in CSS:

.ie10 .selector {...}

More info here: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

IE10 and IE11

Method 1

This one works really fine.

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

Method 2

Less supported, I already had issues with it but can't explain why.

@media all and (-ms-high-contrast:none){
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
}

Edge

Edge 12 to 13

@supports (-ms-accelerator:true) {
	.selector { property:value; } 
}

Edge - tested up to 41 (Edge HTML 16)

@supports (-ms-ime-align:auto) {
	.selector { property:value; } 
}

Edge 12 to 15

@supports (-ms-ime-align:auto) and (not (display: grid)) {
	.selector { property:value; }
}