html - 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