Encountering an odd issue in IE9 while attempting to display a background gradient.
The approach involves applying multiple classes to a container element.
<div class="gradient corners"></div>
Here is the CSS being used:
.gradient {
background-color: #96A7C5;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.19, #6C86AD),
color-stop(0.6, #96A7C5)
);
background-image: -moz-linear-gradient(
center bottom,
#75A33A 19%,
#8DC447 60%
);
.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
To achieve the gradient effect in IE, the filter property is applied to the .gradient class.
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');
However, implementing the filter causes the rounded corners to disappear.
An attempt was made to add a conditional statement for the filter declaration like this:
<!--[if IE]>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');
<![endif]-->
While this successfully restores the rounded corners, it results in the gradient disappearing.