IE9中的渐变+圆角CSS问题

Question

在当前项目中，我在CSS文件中使用了CSS3渐变。 为了支持IE浏览器，我也使用了filter属性。 以下是我的代码：

.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 */

}

但是当我在上面的代码中使用filter属性时， border-radius属性不起作用。 如果有人知道解决方法，请与我分享。

谢谢

Answer 1

您可以使用PIE.htc获得所需的结果。

PIE代表渐进Internet Explorer。 这是IE附带的行为，当应用于元素时，它允许IE识别并显示许多CSS3属性。

PIE当前为以下CSS3功能向IE 6至8添加了全部或部分支持：

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

此外，PIE在IE 9中增加了对边框图像和线性渐变的支持，而IE 9已经本地支持其他功能。

http://css3pie.com/

或查看演示： -http : //jsfiddle.net/ZxzSs/1/

为了支持PIE.htc，您必须将PIE.htc文件保留在根目录下，而不适合在您的网站上使用。...

Answer 2

您应该能够将渐变应用于具有圆角的元素的子级。 我没有在家用计算机上访问IE9的权限，但这应该可以工作：

.element {
    background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
    border-radius: 10px;
}
.element .ie-helper {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 );
}

HTML：

<div class="element">
    <!--[if lt IE 9]><div class="ie-helper"><![endif]-->
    <p>Your content with gradient and rounded corners...</p>
    <!--[if lt IE 9]></div><![endif]-->
</div>

如果在IE10 +或其他浏览器中查看了该页面，则渐变和圆角都将应用于同一元素（假设您从代码示例中带回了供应商特定的前缀）。 内部的div.ie-helper将仅在IE9及更低版本上呈现，这是因为使用了条件注释 。

这不是一个理想的方法，但是可以完成工作，但是由于您需要广泛支持的各种浏览器，因此这是一个合理的解决方法