Question

我们有一个问题，即我们在下面使用此代码。它只是一个带圆角和渐变的基本盒子（我们将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
    );
}

Answer 1

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

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

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

E.g。 -pie-background：线性渐变（顶部，＃00ff00，＃ff0000）;

Answer 2

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

只需将脚本最后包含在head标签中，它就应该处理其余部分。请参阅自述说明

圆角Corps CSSPIE + CSS渐变

2 个答案: