I recently ran across this Internet Explorer CSS3 workaround that uses a HTC file to solve the majority of my CSS3 woes when it comes to developing cross-browser layouts.  Rounded corners, drop shadows, gradients, rgba, multiple backgrounds and even PNG transparency support are all solved with a simple (mostly simple) bit of CSS and the HTC file they’ve developed.The official site for this fix is here:

http://css3pie.com/

I’ve set up a working demo of the code described below here:

View Demo

Download Source Files

I tried this out on a new project that involved creating a tab-style content box with rounded corners.  Normally this would involve either using image sprites or living with the fact that IE-based browsers will not be able to render the corners as the designer wanted them.

Here’s a screenshot of the basic tabbed content boxes as they are rendered in Internet Explorer 6 and Internet Explorer 7/8.  I lumped 7 and 8 together since they were nearly identical except for some very minor font anti-aliasing differences.

Before CSS3 PIE

Internet Explorer 6

Internet Explorer 7 & 8

After CSS3 PIE

Internet Explorer 6

Internet Explorer 7 & 8

Implementation

There are a few things to watch out for when using CSS3 PIE.  A few of the CSS3 properties have to be done using the “-pie” prefix in order to trigger the proper rendering in Internet Explorer.  For example, to achieve this same multiple background declaration in CSS3 PIE:

background-color: #ccc;
background-image: url(quote-open.png), url(quote-close.png);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
background-color: #ccc;	background-image: url(quote-open.png), url(quote-close.png);  background-position: left top, right bottom;  background-repeat: no-repeat, no-repeat;

You will need to add the CSS3 PIE specific declaration for backgrounds:

-pie-background: #ccc url(quote-open.png) no-repeat left top, url(quote-close.png) no-repeat right bottom;

Also, when you’re using JavaScript to manipulate styles on your page you need to add the following bit to your CSS to tell CSS3 PIE to “listen” to that element and watch for updates to it’s ancestors.

-pie-watch-ancestors: 1;

Finally, the last semi-tricky thing with CSS3 PIE is that for some elements you will have to apply the following CSS to their ancestor to get the CSS3 PIE to take effect. The symptom of needing to apply this fix is if the element you’re expecting to be styled disappears from the screen upon rendering:

position: relative;
z-index: 1;

All in all, I’ve found this system well worth the 2-3 minor tricky parts. In my opinion it’s a much better solution than letting the unsupported CSS3 elements degrade for those that are still using Internet Explorer 6-8.