4

丸みを帯びた境界線と 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;、何も機能しません。助言がありますか？

4

2 に答える 2

2

これは既知のバグです。stackoverflow を検索すると、このような質問がいくつかあります。
IE9 の境界半径と背景のグラデーション ブリーディング

マークアップを追加せずにこれを回避する唯一の方法は、svg を使用することです。
Colorzilla グラデーション エディターを使用すると、簡単に作成できます。

于 2012-02-09T00:47:31.573 に答える
1

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 */ 
}
于 2013-02-12T19:01:29.977 に答える