How can I polyfill CSS 3 styles for Internet Explorer 7 and 8?

Question

I work for a client who has masses of <a> elements on their site which use the same styling and reference the same class name.

The problem I have is the developer who worked on this project before me used CSS3 to style the element and completely ignored the fact IE7 and IE8, even though it was in the scope of the browser model and this issue is now apparent on hundreds of pages.

What I want to ask is what do you feel the best approach is to putting a suitable fix in place without effecting the markup? such as scripts which support border-radius, box-shadow, gradients etc.

Please don't come back answering about graceful degradation as this is not going to happen, I have already spoken to the client and they don't want to take that approach.

Answer 1

You can use a script to perform that "support" for you on clients using old IE versions!

Download script here.

This script allows CSS3 support for Internet Explorer 6, 7, and 8.

The web site link !

Answer 2

My favourite solution to this problem is CSS3 PIE . It's an HTC which brings a nice selection of CSS3 features to IE 6-9 .

Note: PIE uses absolutely positioned VML elements (in IE6-8) to support a variety of CSS3 features. This can cause issues like disappearing backgrounds/borders/etc. The fix is usually to use position: relative; on the affected element or it's parent. See the known-issues for more information (and other fixes).

Answer 3

I think there is no one solution but you can combine more than one solution, for example to border-radius you can use jquery corner:

http://jquery.malsup.com/corner/

modernizr can be a good tool too!