internet-explorer-10 - border-top-left-radius 在 IE 中不起作用

Question

我目前正在使用 IE10 设计一些东西 [因为它需要与之完全兼容]，但我遇到了麻烦。

我在页面的两侧各有两个框，顶部有一张图片。内顶 Angular 使用 border-top-*-radius flex ，这也在内部图像上实现。

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 几乎不引人注意并且似乎可以正常工作。

Answer 1

边框半径的行为受 IE10 中兼容模式的影响。

如果按 F12，您可以查看开发者控制台并更改兼容性设置。

如果文档模式设置为 IE7 或 IE8 标准，则 border-radius-left: 10px;不起作用，但是如果标准模式设置为 IE9 标准或标准，则它会按预期运行。