IE hack through CSS, JS and conditional comment

You can say Internet Explorer is a nightmare to the designers. The probability of getting design issue increases when the client check the website in IE.

Currently have Internet Explorer 6,7,8,9,10,11 and edge(Still don't use it) but we are mainly focusing in the IE9,10,11 as responsive start with IE9.Now we have two types of IE issues i. Design issue for IE version and ii. Specific design issue in specific version.So we need sometime to use hack specific version or for all the version of IE.
But as I mention earlier that we should not carry forward the basic structure issue and use browser hack.So please  make sure all the mention steps you  taken in your site from my last post here.

Conditional comments:

This is the best way to do IE hack use conditional comments on the heade.By this way you cann avoid unnecessary codes in same file and its also supports W3C validation.

 <!--[if IE 6]> <link rel="stylesheet" href="iehack/IE6.css" type="text/css"/> <![endif]-->

 <!--[if IE 7]> <link rel="stylesheet" href="iehack/IE7.css" type="text/css"/> <![endif]-->

<!--[if IE 8]> <link rel="stylesheet" href="iehack/IE8.css" type="text/css"/> <![endif]-->
<!--[if IE 9]><link rel="stylesheet" href="iehack/IE9.css" type="text/css"/><![endif]-->

You can also use the comment like this but the moreover things are common.

 <!--[if gte IE 6]> Internet Explorer 6 or greater <![endif]-->

 <!--[if gte IE 7]> Internet Explorer 7 or greater <![endif]-->

 <!--[if gte IE 8]> Internet Explorer 8 or greater <![endif]-->

 <!--[if gte IE 9]> Internet Explorer 9 or greater <![endif]-->

But IE10 and 11 remove the conditional comments, so we need to hack them by the css or JavaScript.

Hack by CSS:

Just add * before the css which will apply on the Internet explorer 6 & 7.

 html .selector  {} // IE 6-7

Fo the Internet Explorer 8 we need to add '\0'

 body{background:pink \0;}

For the Internet Explorer 9 we need to write css like

 

 :root #element { padding:20px \0/IE9;color:#ff0000 \0/IE9; }  /* IE9 */

For Internet Explorer 10 & 11 I recommended to use @media code as these two version widely supports advance CSS

Hack by @media:

If you need to write something which only work in IE10

 @mediaalland(min-width:0\0) {

  // Write css only for IE10

 }

If you need to mention for IE 10&11 then

 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

  // Write CSS only for IE10 & IE11

 }

@mediascreen also support lower version of IE,

Only for IE8

 @media \0screen {

  // Only for IE8

 }

IE8 and its lower versions

 @media \0screen\,screen\9 {

  // All the lower version from IE8

 }

Only for Internet Explorer 6 & 7

 @media screen\9 {

  // Only for IE6&7

 }

Hack by JavaScript

In this JavaScript function we can detect Internet Explorer 3 to 10 with their sub version.IE11 actually remove this feature.

VersionIE = /*@cc_on (function() {

 switch(@_jscript_version) {

  case 1.0: return 3;

  case 3.0: return 4;

  case 5.0: return 5;

  case 5.1: return 5;

  case 5.5: return 5.5;

  case 5.6: return 6;

  case 5.7: return 7;

  case 5.8: return 8;

  case 9: return 9;

  case 10: return 10;

 }

})() || @*/ 0;

Now you cn call the function like

if(versionIE () == 9){

 alert($(someelement).attr('padding')); // Detecting someelement padding in IE9.

}

We also can detect IE11 by this code.

versionIE='-ms-scroll-limit'indocument.documentElement.style&&'-ms-ime-align'indocument.documentElement.style;

Now this versionIE variable return true when load in an IE11 nd based on that we also can ru operation.

 if(versionIE){

  alert($(someelement).attr('padding')); // Detecting someelement padding in  ie11.

 }

 

Thanks for visiting.Please support us by shearing our posts and like your social pages.
Please subscribe for our future posts.