Internet Explorer 9 中的渐变溢出圆角边框答案

【问题标题】：Gradient in Internet Explorer 9 overflows the rounded borderInternet Explorer 9 中的渐变溢出圆角边框
【发布时间】：2012-03-01 12:15:55
【问题描述】：

我在 IE9 中遇到了圆角边框和渐变问题。渐变溢出圆角边框。

.cn_item:hover, .selected{
    width:300px;
    border:1px solid #333333;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    height:49px;
    color:#333333;
    padding:5px;
    margin:6px 5px 0px 0px;
    text-shadow:1px 1px 1px #000;       
    background-image: -ms-linear-gradient(top, #DDDDDD 25%, #FF0000 5%);        
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#666666');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#666666')";
    zoom: 1;

    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

我已经使用了overflow:hidden;，但没有任何效果。有什么建议吗？

【问题讨论】：

标签： css internet-explorer rounded-corners radial-gradients

【解决方案1】：

这是一个已知的错误。如果你搜索stackoverflow，就会有一些类似这样的问题。
IE9 border-radius and background gradient bleeding

不添加更多标记的唯一方法是使用 svg。
Colorzilla gradient editor 应该很容易。

【讨论】：

【解决方案2】：

只需使用包装 div（圆形和溢出隐藏）来裁剪 IE9 的半径。简单，跨浏览器工作。不需要 SVG、PIE、JS 或条件 cmets。

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}

【讨论】：