0

現在、IE10 を使用して何かを設計していますが [完全に互換性を持たせる必要があるため]、問題が発生しています。

ページの両側に 2 つのボックスがあり、上部に画像があります。上部の内側の角は、border-top-*-radius を使用して湾曲しており、これは画像の内側にも実装されています。

CSS:

   #rightsidebar {
    position:fixed;
    width: 300px;
    height: 400px;
    padding: 10px;
    margin: 0px 0 0 500px;
    border-top-left-radius: 110px;
    -webkit-border-top-left-radius: 110px;
    background-color: #ffffff;
    border: 2px dashed #000000;
}

#leftsidebar {
    position:fixed;
    width: 300px;
    height: 400px;
    padding: 10px;
    margin: 0px 0 0 0px;
    border-top-right-radius: 110px;
    -webkit-border-top-right-radius: 110px;
    background-color: #ffffff;
    border: 2px dashed #000000;
}

HTML:

<div id="rightsidebar">
            <img style="background-color: #000000; width:300px; height:196px; border-top-left-radius:105px; -webkit-border-top-left-radius:110px;" src="{image:right image}">
</div>

<div id="leftsidebar">
            <img style="background-color: #000000; width: 300px; height: 196px; border-top-right-radius: 105px; -webkit-border-top-right-radius: 105px;"src="{image:left image}">
</div>

私の JSFiddle はここにあります: http://jsfiddle.net/V73G5/

IE を使用すると、コードをコピーして貼り付けて少し編集しただけでも、右のコンテナーのイメージが左のイメージと同じではないことがわかります。ただし、Chromeでは機能するため、これはバグである可能性があります。これを解決する方法についての洞察や提案はありますか?

編集:私はそれを回避する方法を見つけました:

border-radius: 105px 1px 0 0;

これは適切な解決策ではなく、そもそもなぜこれが起こったのかについてはまだ手がかりがありませんが、1px はほとんど目立たず、機能しているようです.

4

2 に答える 2

1

ボーダー半径の動作は、IE10 の互換モードの影響を受けます。

F12 を押すと、開発者コンソールが表示され、互換性設定を変更できます。

ドキュメント モードが IE7 または IE8 標準に設定されている場合、border-radius-left: 10px; 動作しませんが、標準モードが IE9 標準または標準に設定されている場合、期待どおりに動作します。

于 2013-11-07T08:38:39.683 に答える