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

Question

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

页面两侧有两个方框，顶部有一个图像。内部顶角使用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几乎没有引起注意，似乎可以使它发挥作用。

Answer 1

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

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

如果文档模式设置为IE7或IE8标准，那么border-radius-left：10px;不起作用，但是如果标准模式设置为IE9标准或标准，那么它的行为与预期一致。

Answer 2

下载PIE.htc文件并附上你的css

      #rightsidebar {
                     border-radius: 8px;
                     behavior: url(/pie/PIE.htc); 
                    }

有关详细信息，请查看下面的图片一。

它可以帮到你。