IE8 and lower are not playing nice with HTML5 pages. Also CSS3 wasn’t invented when it released. To get the best result on IE8 with the least effort just add some scripts. Not pixel perfect, but good enough for the remaining 2.5 percent of unsupported browser users.
Scripts
First up are the new HTML tags like nav, section and footer. Theses are defined by adding html5shim in the <head>. Now the page looks a lot less messed up.
To get css3 working add selectivizr. This emulates CSS3 pseudo-classes and attribute selectors. There is a no-script option to fallback to a different stylesheet when scripting is disabled.
Last to enable media queries in css add css3-mediaqueries. This enables things like first-child in css.
Code added to the masterpage
<!--[if lt IE 9]> <script src="/scripts/html5shiv.js"></script> <script src="/scripts/css3-mediaqueries.js"></script> <script src="/scripts/selectivizr.js"></script> <![endif]-->
Last tips
- Don’t apply styling to <a>, wrap it with a <div> with the styling
<div class="blox span4"> <a href="somewhere.else.html"> <h2>Take me somewhere</h2> </a> </div> - Tried -ms-behaviors like css3 pie and background-size-polyfill but they didn’t help. Avoid them.
- IE8 and lower is a small piece of the internet users. Make the page readable and move on.
.NET Development by Eric 