0

我目前正在使用 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 几乎不引人注意并且似乎使它起作用。

4

2 回答 2

1

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

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

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

于 2013-11-07T08:38:39.683 回答
0

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

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

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

在此处输入图像描述

可能会帮助你。

于 2013-12-02T07:50:21.473 回答