Joseph Moore -

IE9 bug: Filter gradient and border-radius

What is the filter progid:DXImageTransform.Microsoft.Gradient?

If you're not sure what I'm talking about when I mention the CSS property filter then here's a link to Microsoft's introduction. Essentially, we're looking at a set of somewhat hacky fixes for things that Internet Explorer can't normally get its head around.

The gradient filter's one of my favourites; I use it regularly to avoid using background images for items such as buttons with a linear gradient on them.

The problem

With IE8 everything was hunky dory. Just specify the filter property followed by the background property with a linear-gradient value. Then along came IE9 with a big fat bug. Sure, it supports linear-gradients but the filter property confuses the hell out of it. IE8 never had to worry about rounded corners as it didn't support border-radius, but IE9 does and that's the problem. Specify the filter property and you can wave bye bye to border-radius. The later background property does nothing to override it as it's an entirely separate thing.

The solution

You simply have to move all filter gradients into pre-IE9 conditional stylesheets. Yeah I know, more files, more mess, more faff, but removing that filter from IE9's scope sorts it right out.