Question

我在列表元素（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');

由于

Answer 1

我也有这个，目前似乎没有工作。你可以拥有一个或另一个，而不是两者。

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

Answer 2

这不是对roundies的限制，它是filter渐变的限制。事实证明，filter渐变也会导致IE9中标准border-radius角落出现类似问题。

没有简单的解决方法;最好的解决方案就是不要在旧版本的IE中使用那些filter渐变;所以IE8和更早版本只是一个后退的纯色背景。

IE9确实有一个解决方法，因为它可以使用带有渐变的SVG图像作为嵌入CSS的背景作为数据URL。它有点笨重，但确实有效。 IE8虽然没有这个选项。

如果你必须在IE8中使用渐变，你几乎不得不坚持filter样式，并忍受错误。

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

希望有所帮助。

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

2 个答案: