0

問題がありますが、境界線の半径には正確ではありませんが、説明する方法がわかりませんが、chrome、firefox などで見られる 2 つの画像と、IE9 以前で見られる別の画像を配置します。

Chrome およびその他のブラウザ

ここに画像の説明を入力

IE9以前

ここに画像の説明を入力

border-radius を適用しても、まだそれらのコーナーが表示されているようです。

aside#sidebar ul {
    margin-top: 15px;
    width: 100%;
    height: 200px;
    background: transparent;
}
aside#sidebar ul li {
    font-size: 14px;
    list-style-type: none;
    margin-bottom: 5px;
    background: transparent;
    //border: 3px solid white;
}
aside#sidebar ul li a {
    display: block;
    padding: 5px;
    color: white;
    border-left: 10px solid white;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    behavior: url(PIE.htc);
    background: transparent;
}

編集

この部分に何か関係がありますか？リスト内の各アイテムに使用される背景。これは最初のアイテムの背景です。

aside#sidebar #itemLinea1 {
    //border-color: #DE9E26;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZWFiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZjY2Q0ZCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2Y4YjUwMCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYmRmOTMiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,0.75) 50%, rgba(248,181,0,0.75) 51%, rgba(251,223,147,0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,234,187,1)), color-stop(50%,rgba(252,205,77,0.75)), color-stop(51%,rgba(248,181,0,0.75)), color-stop(100%,rgba(251,223,147,0.5)));
    background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    background: -o-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#80fbdf93',GradientType=0 );
    transition: border 0.3s linear;
    -webkit-transition: border 0.3s linear;
    -moz-transition: border 0.3s linear;
    -o-transition: border 0.3s linear;
}

何であるべきですか？

4

3 に答える 3

1

要素にグラデーションを適用するために IE フィルターを使用しています。残念ながら、これらのフィルターはボックスの背景に描画されないため、同じ要素またはそれらのコンテナーにborder-radius適用しているかどうかに関係なく、クリップされません。border-radius

グラデーションの背景を適用する必要がある場合は、背景画像を使用することをお勧めします。IE9 のみをサポートする必要がある場合は、フィルターを破棄して SVG 背景画像を保持します。

于 2012-08-02T20:33:31.437 に答える
0

border-radius だけを使用してみてください。firefox と webkite をターゲットにするだけでなく、core が必要です。それ以外の場合は、以前のブラウザーが境界半径をサポートしていないか、適切な接頭辞 -ms- を使用していないためです。マイクロソフト

于 2012-08-02T20:13:14.533 に答える
0

問題は、要素に丸みを帯びた角を適用しているaが、背景色を基になるli要素に割り当てていることです。したがって、色付きの背景を持つ丸みを帯びていない長方形の上に丸みを帯びた長方形があります。したがって、丸みを帯びていない長方形の角が突き出ています。

次の 2 つのフィドルを比較してください。

壊れた: http://jsfiddle.net/87R5b/2/ 修正済み: http://jsfiddle.net/87R5b/3/

a2 つ目では、代わりに要素に黄色のグラデーションを適用しました。これは可能な解決策の 1 つにすぎませんが、うまくいくはずです。

お役に立てれば！

于 2012-08-02T20:33:41.550 に答える