IE specific hack

HTML & CSS
1

Recently faced an issue with cross browsing in IE(one extra px padding issue made me to learn new things).
After googled sometime get fix for IE:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

Is the above one is standard one or not for IE hacks?

  1. All are using the below one to fix the IE hacks and do we need to type all these things manually and anyone can explain clearly what is it and how to use this with example?

2

Hi,

The first thing you should try is to fix the problem without hacks. Sometimes that means a change of design to accommodate the discrepancy. If all else fails then use hacks but be aware that they are not foolproof or future-proof.

The above is not standard and uses a proprietary ms vendor prefix that works in IE10 and 11 but won’t work in IE edge (which will eventually be the main IE browser). Therefore your fix will be no use if IE edge needs the same treatment. Which brings me back to my first statement of trying to fix the problem without hacks first or at least a stable work-around,

<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<!--[if !IE]><!--><html lang="en"><script>if(/*@cc_on!@*/false){document.documentElement.className+='ie10';}</script><!--<![endif]-->

The above rules (apart from the ie10 rule) use conditional comments to target all versions of IE from version 9 to version 7 ) and beyond if needed. To use them in your CSS code you would need to prefix the class that the above rules add.

e.g.

.ie6 .test {color:red} /*IE6 gets red */
.ie7 .test {color:blue} /* IE7 gets blue */
.ie8 .test {color:green} /* IE8 gets green */
.ie9 .test {color:black} /* IE9 gets black */
.ie10 .test {color:yellow} /* IE10 gets yellow */

Note that the ie10 hack:

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

The above will only work in IE10 and not IE11 and not in IE Edge either. IE10 is basically a dead browser as usage is very low so adding a 1px fix to it is nonsense really.

Modern IE uses sub pixel positioning so sometimes things may seem a fraction out due to anti alias and other things. Make sure you have set the line-height correctly and occasionally a rounding error can be corrected by offering a fraction of a pixel (e.g. 10.5px) but needs testing.

In the end it is better to find another way around it by changing the design so that specific dimensions may or may not be required. If you had a live example of the problem we could offer something better perhaps.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.