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代表Progressive Internet Explorer。它是一种IE附加行为，当应用于元素时，允许IE识别并显示许多CSS3属性。

PIE目前为IE 6到8增加了全部或部分支持，用于以下CSS3功能：

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及更低版本上呈现，因为使用了conditional comments。

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

IE9中的渐变+圆角CSS问题

2 个答案: