Internet Explorer 9のグラデーションが丸みのある境界線をオーバーフローします

Question

IE9の丸みを帯びた境界線とグラデーションに問題があります。グラデーションは丸められた境界をオーバーフローします。私はすでにoverflow:hidden;を使用しますが、何も動作

.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; 
} 

。助言がありますか？

Answer 1

これは既知のバグです。 stackoverflowを検索すると、このような質問がいくつかあります。
IE9 border-radius and background gradient bleeding

マークアップを追加しないで唯一の方法は、svgを使用することです。
Colorzilla gradient editorは簡単にする必要があります。

Answer 2

IE9の半径をクリップするには、ラッパーdiv（丸め&オーバーフロー隠し）を使用してください。シンプルで、クロスブラウザで動作します。 SVG、PIE、JS、または条件付きコメントは不要です。

<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 */ 
}