Implementing rounded corners with IE fallback?

问题:

I am in a need of implementing rounded corners in IE. I am aware of the HTC approach using VML, but that's not an option because it complicates things (like when you have absolute and relative positioning, etc) and it can only apply the effect on all corners.

I am going to use Photoshop to make the rounded corners, and then slice them. However, I don't want the entire web community to suffer from IE users, thus, I want to use border-radius for those who support it. I think it's safe enough to apply border-radius to everyone and put an IE conditional comment IE lt 9 to apply images for IE 6, 7 and 8.

My question is that how do I make such a ie.css that will apply corner images seemlessly? It's easy with absolute positioning, but that's not an option when the corners have transparency (i.e., the container's corners will be seen through the transparent corner image). Any ideas?

回答1:

Personally my favourite by far is the CSS3Pie project its simple, non-obstrusive and means that you can do nice CSS3 stuff without a bunch of separate hacks in IE's various versions.

Just to clarify, this means you can have border-radius, box-shadow, etc. in your CSS without the need to do ANY conditional comments.

This does require JavaScript to be enabled on the browser, but ol' Timmy sitting there with IE6 and no javascript isn't really expecting much internet love is he now?

回答2:

Ryan Thrash has a nice tutorial on Simple Rounded Corner CSS Boxes
that supports IE as well as the rest of the browsers.

回答3:

How about http://www.curvycorners.net