当元素具有渐变过滤器时，DD Roundies 在 IE 中不起作用答案

【问题标题】：DD Roundies not working in IE when element has gradient filter当元素具有渐变过滤器时，DD Roundies 在 IE 中不起作用
【发布时间】：2013-07-16 18:51:44
【问题描述】：

我在列表元素 (li) 上使用 DD roundies，该元素还应用了渐变过滤器并且圆角不会出现，但是如果我删除渐变，圆角就会出现。我可以做些什么来解决这个问题，或者这是圆形的已知限制吗？

#hero-tabs li {
    display:block;
    float:left;
    width:279px;
    /*height:100px;*/
    font-size:11px;
    line-height: 1.3;
    color:#fff;
    border-left:1px solid #ccc;
    cursor:pointer;
    background-color:#555;

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#222222, endColorstr=#666666);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#666666')";
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#222));
    background-image: -moz-linear-gradient(100% 100% 90deg, #666, #222);
}

DD_roundies.addRule('#hero-tabs .first-tab', '0 0 0 5px');

谢谢

【问题讨论】：

标签： css internet-explorer rounded-corners

【解决方案1】：

我也发现了这个，目前似乎没有解决方法。你可以有一个或另一个，而不是两者。

IE 将渐变过滤器应用于原始元素，因此来自 dd_roundies 的圆角元素不会覆盖它。

【讨论】：

【解决方案2】：

这不是圆形的限制，而是filter 渐变的限制。事实证明，filter 渐变也会在带有标准border-radius 角的 IE9 中引起类似的问题。

没有简单的解决方法；最好的解决方案就是不要在旧版本的 IE 中使用那些 filter 渐变；因此 IE8 及更早版本将只是一个备用纯色背景。

IE9 确实有一个变通方法，因为它可以使用带有渐变的 SVG 图像作为嵌入在 CSS 中的背景作为数据 URL。这有点笨拙，但它确实有效。不过IE8没有这个选项。

如果您必须在 IE8 中使用渐变，您将不得不坚持使用 filter 样式，并忍受这些错误。

不过还有另一种选择——CSS3Pie。这是一个类似于 DD_Roundies 的小型 JS 库，它为旧 IE 版本添加了border-radius 支持。但除此之外，它还做渐变。因此，我的建议是使用 CSS3Pie 而不是 DD_Roundies，它会同时为您处理这两个问题。

希望对您有所帮助。

【讨论】：