IE9 Rounded Corners & CSS Background Gradients Living Together?

Question

I came across a weird thing in IE9 trying to get a background gradient to display.

Basically I\'m applying multiple classes to a container object.

&l         


        

Answer 1

you don't need the if IE block.

just put all 3(4 if you include both IEs) rules in the style declaration, the browsers will only pick up the ones that they understand.

an example:

.gradient {
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1,#81a8cb)); /* Safari & Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

It should also be noted that gradients in IE will only work if the element hasLayout (See: http://reference.sitepoint.com/css/haslayout)