1

在我当前的项目中，我在我的 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属性不起作用。如果有人知道解决此问题的方法，请与我分享。

谢谢

4

2 回答 2

1

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

PIE 代表渐进式 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 文件保留在您的根文件夹中，而不是为您的网站工作....

于 2012-05-17T06:48:49.307 回答
0

您应该能够将渐变应用于具有圆角的元素的子元素。我无法在我的家用机器上访问 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 及更低版本上呈现。

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

于 2012-05-17T06:48:22.830 回答