Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
" Make IE Better Compatible "
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
======================================================
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 (TOTALLY NOT NEEDED - I LEFT HERE FOR REFERENCE ONLY)
==================
.selector { color:#f00\9; } - http://stackoverflow.com/questions/660652/ie8-css-selector
The above solution doesn't work with font-family, so instead you need to use "\0/ !important"
Example: { font-family:Arial \0/ !important; }
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 :/
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 <head>:
<script>
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
</script>
Usage:
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 <head>:
<!--[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:
.ie10 .selector {...}
== More info here: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/
---------------------------------
IE10 and IE11 (Method 1)
==================
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.selector { property:value; }
}
---------------------------------
IE10 and IE11 (Method 2)
==================
@media all and (-ms-high-contrast:none){
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
---------------------------------
/*----MS Edge Browser CSS Start----*/
@supports (-ms-accelerator:true) {
.selector { property:value; }
.edu_input_field{ width:15.1% !important; }
}
/*----MS Edge Browser CSS End----*/
---------------------------------
@nothrem

This comment has been minimized.

Copy link

commented Sep 12, 2017

@supports (-ms-accelerator:true) { works only for IE12 and IE13.
@supports (-ms-ime-align:auto) { works for all Edge versions (currently up to IE15).

Since Edge supports feature query, in many cases you don't need a general hack but you can directly ask for the feature you want to use.
e.g. to use Grid layout, use:
@supports (display:-ms-grid) { ... }

@HumphreyHuang

This comment has been minimized.

Copy link

commented Jan 29, 2018

You just saved my life, thank you!

@HM100

This comment has been minimized.

Copy link

commented Mar 11, 2018

For me targeting only edge i use supports condition and checks if it supports position:-ms-page

@wkille

This comment has been minimized.

Copy link

commented Apr 9, 2018

Yes! Thank you all so much. I went with supports position:-ms-page too and it works perfectly. I do wish there was a more future-proof way to get the browser type.. hopefully microsoft will have fixed the bug I'm working around before this stops working!

@dantahoua

This comment has been minimized.

Copy link

commented May 28, 2018

Hello! Does the IE10-IE11 method 2 JUST cover those browser and NOT Edge? I need a hack to be effective just on IE11, not on Edge...

@fumpe

This comment has been minimized.

Copy link

commented Jul 10, 2018

this is universal, or only until version 10?

@nipunann1991

This comment has been minimized.

Copy link

commented Aug 6, 2018

@nothrem Works Perfectly. Thanks bud 💯

@shubhof7

This comment has been minimized.

Copy link

commented Feb 5, 2019

I have a css card that have a flip effect on hover and shows the text but it is not working on the edge?

@shubhof7

This comment has been minimized.

Copy link

commented Feb 5, 2019

edge hacks are not working on it

@fvonellerts

This comment has been minimized.

Copy link

commented Apr 10, 2019

For the worst Edge versions (12-15), you can use @supports (-ms-ime-align:auto) and (not (display: grid)).

@ashoktandan007

This comment has been minimized.

Copy link

commented May 28, 2019

Nice post.Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.