1

我们有一个问题，我们在下面使用此代码。它只是一个带有圆角和渐变的基本框（我们将 CSSPie 应用于它）。我们注意到，在所有 IE 中，由于渐变（饼图不起作用），我们无法在 IE 中保留此元素的圆角。有没有人遇到过解决方案？我们很乐意将我们的渐变完全从 Photoshop 迁移到 CSS，但这证明是一个烦人的问题！

谢谢！！

    .superduper {
    position: relative;
    width: 100px;
    height: 100px;
-webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    background: #ff0000 url("gradient-bg.png") repeat-x top;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    *background: #ff0000;
    background: #ff0000\0/;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FF00ff00, endColorstr=#FFff0000);

    background-image: -webkit-gradient(
        linear,
        left top, left bottom,
        from(#00ff00),
        to(#ff0000)
    );
    background-image: -webkit-linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
    background-image: -moz-linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
    background-image: -o-linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
    background-image: linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
}
4

2 回答 2

2

这是因为您使用的是 IE 专有的“过滤器”属性。由于 IE 呈现过滤器的方式，它会绘制整个元素框，从而覆盖圆角。

您应该删除 filter 属性，并在 -pie-background 属性中指定您的线性渐变。这将允许 PIE 渲染渐变并尊重边界半径。

有关此操作的示例，请参阅 css3pie.com 主页（选中“显示 CSS”复选框以查看生成的代码。）

例如 -pie-background: 线性梯度(top, #00ff00, #ff0000);

于 2011-08-02T21:44:36.183 回答
0

这种替代方法很新：https ://github.com/bfintal/jQuery.IE9Gradius.js

只需将脚本最后包含在您的 head 标记中，它应该处理其余部分。请参阅自述文件

于 2011-09-14T10:33:20.743 回答