Question

In my current project, I’ve used CSS3 gradient in my CSS file. To support IE browser, I’ve used filter property as well. Following is my code:

.card.active .content.back {
  background: #333; /* Old browsers */
  background: -moz-linear-gradient(top, #333 0%, #0e0e0e 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #333 0%,#0e0e0e 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */

}

But when I use the filter property in the above code, the border-radius property is not working. If anyone know a fix for this, please share it with me.

Thanks

Answer 1

You can use PIE.htc for your desired results.

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.

PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features:

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

In addition, PIE adds support for border-image and linear-gradient to IE 9, which already supports the other features natively.

http://css3pie.com/

or see the demo:- http://jsfiddle.net/ZxzSs/1/

for support PIE.htc you have to keep the PIE.htc file on your root folder than will work for your website….