Skip to main content

Four Important IE Hacks

Have you ever panicked with troubleshooting some silly issues for IE browsers. I assume yes. Most of the developers confronted with such problems including myself. Sometimes it is so annoying as well as time consuming to resolve few IE bugs. Here I shared some of the IE hacks to save your time. Hope it helps.

1. box-sizing issue

When I was using bootstrap with XML documents, many a time IE8 didn't supported global reset for box-sizing.
* {box-sizing:border-box} //remove this global declaration

As a hack, first I used to remove this global style from the css and write below chunk of code as an internal style on my page which resolved responsiveness issues.

Add back these box-sizing properties for two cases when its other IE versions, not IE8 and when its other browsers, not any IE.

<![if IE]><![if !IE]>
<style> 

*, *:before, *:after { 

        -webkit-box-sizing:border-box; 

        -moz-box-sizing:border-box; 
         box-sizing:border-box 
}
</style>
<![endif]><![endif]>


Now below code applies box-sizing to only those wrapper/outer containers where required in IE8.

[[if IE 8]>
<style>
header *, header *:before, header *:after,
#page *, #page *:before, #page *:after,
#main *, #main *:before, #main *:after,
footer *, footer *:before, footer *:after,
nav *, nav *:before, nav *:after, #navbar *,
#navbar *:before, #navbar *:after,
#content *, #content *:before, #content *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
</style>
<![endif]]

2. Using cufon fonts

Again when you are working with XML documents, its hard to make it work in all browsers. Using cufon fonts was the issue for IE8 and hence there was a below hack.

<xsl:comment><![if gte IE 9]>
<script type="text/javascript"> Cufon.set('engine', 'canvas'); </script>
<![endif]></xsl:comment>


3. Media Queries

IE8 doesn't support media queries which are required for responsive sites. Personally I do not prefer Modernizer.js unless it is necessary. There are two solutions which are widely used.

One is to use respond.js script if there is a limited use of media queries on your web page. Usually I prefer this one as it gets job done in easy way.

  • This script's focus is purposely very narrow so only min-width and max-width media queries and all media types (screen, print, etc) are translated to non-supporting browsers.
  • This script is faster comparatively than other such scripts. Put this script after all CSS you use in web page.
  • New version of respond.js does not require modernizer anymore so no need to club them.
  • You can incorporate the script separately in your web page or provide a CDN link directly.

Second is to use css3-mediaquery-js.

  • This script is noticeably slow when rendering complex responsive designs (both in file size and performance), but it does support a lot more media query features than respond.js
  • When using this script, combine it with other scripts and/or compress and put it just before </body> tag
  • You can incorporate the script separately in your web page or provide a CDN link directly. 

4. X-UA-Compatible META tag

The X-UA-Compatible meta tag allows web authors to determine in which version of Internet Explorer should page be rendered as.

According to Microsoft, if you are using the X-UA-Compatible META tag you want to place it as close to the top of the page's HEAD as possible.

If you are only supporting latest versions of IE, no need to declare any X-UA-Compatible meta tag then. If you need to support lower versions as IE 8 or IE 9, it is recommended using this tag.

Usually HTML5 documents should use below meta tag which is validated against W3 validator.
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Unless you require any specific compatibility feature avoid using this meta tag. Refer this article for more detailed information about document compatibility.

Comments