HTML5 and CSS3 for IE7 and IE8

Question

I inherited a web application where the front end uses new HTML5 tags (header, nav, section tags) and new CSS3 style attributes (rounded borders). The website looks amazing in Google Chrome and Safari.

However, the client now complains the website is broken for IE7 and IE8. Everything is out of alignment and most of the styles do not render.

What is the easiest way to make this website work in IE7 and IE8? Do I have to: a) Apply some hack to make IE browsers accept the new HTML5 and CSS3 features? b) A complete rewrite of the front end?

Answer 1

Try this lovely script (.js) :)
And for rounded corners i use an other script (.htc)

use the 1st:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

use the 2nd like:

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
behavior: url(border-radius.htc);

Happy sitebuilding :)

The original link is no longer active and HTML5shiv has moved.

Now available on GitHub

https://github.com/aFarkas/html5shiv

Answer 2

For HTML5, I recommend Remy Sharp's HTML5 Shim, although to see the effect, your IE users will need to have JavaScript enabled. Basically it exploits an error in IE6/7/8 which allows HTML5 elements to be recognised after they have first been created in JavaScript using the document.createElement function.

For your CSS, there are a few different hacks such as CSS3 PIE that use the "behaviour" property (which is unique to IE) to simulate CSS3 effects. I have personally refrained from these though, since in my experience, they break very easily, and end up being more hassle than they're worth. I instead tend to write my CSS so that it degrades gracefully in IE, so that rounded buttons look square, but still look nice.