Skip to content

Instantly share code, notes, and snippets.

Star You must be signed in to star a gist
Save amirsuhail786/aeaa48432d51cad0eb1c to your computer and use it in GitHub Desktop.
" 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
Copy link

nothrem 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
Copy link

You just saved my life, thank you!

@HM100
Copy link

HM100 commented Mar 11, 2018

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

@wkille
Copy link

wkille 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
Copy link

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
Copy link

fumpe commented Jul 10, 2018

this is universal, or only until version 10?

@nipunann1991
Copy link

nipunann1991 commented Aug 6, 2018

@nothrem Works Perfectly. Thanks bud 💯

@shubhof7
Copy link

shubhof7 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
Copy link

shubhof7 commented Feb 5, 2019

edge hacks are not working on it

@fvonellerts
Copy link

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

@ashoktandan
Copy link

Nice post.Thanks

@Louis-7
Copy link

Louis-7 commented Sep 16, 2019

Edge hack is not working for the latest version anymore. Use the trick post by @nothrem and @fvonellerts instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment