border-top-left-radius在IE中不工作 [英] border-top-left-radius not working in IE

问题描述

我现在使用IE10来设计某些东西（因为它需要与它完全兼容），我遇到了麻烦。

I'm using IE10 to design something at the moment [Because it needs to be completely compatible with it], and I'm having trouble.

我有两个框在页面的两侧，顶部有一个图像。内顶角是使用border-top - * - radius弯曲的，这也是在内部的图像上实现的。

I have two boxes on either side of the page, with an image at the top. The inner top corner is curved using border-top-*-radius, and this is also implemented on the image inside.

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/

My JSFiddle is here: http://jsfiddle.net/V73G5/

使用IE，您可以看到正确的容器图像不在与左边的相同，即使我只是复制和粘贴代码，并稍微编辑它。但它确实工作在Chrome，这让我认为这可能是一个错误。有关如何解决这个问题的任何见解或建议吗？

Using IE, you can see that the right container's image isn't doing the same as the left's, even though I just copy and pasted the code and edited it slightly. It does however work on Chrome, which makes me think this may be a bug. Any insight or suggestions on how to resolve this?

编辑：我找到了解决方法：

I've found a way to work around it using:

border-radius: 105px 1px 0 0;

这不是一个正确的解决方案，我仍然不知道为什么这发生在第一

It's not a proper solution, and I've still no clue as to why this happened in the first place, but the 1px is barely noticeable and seems to make it work.

推荐答案

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

The behaviour of border radius is affected by compatibility mode in IE10.

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

If you press F12 you can view the developer console and change the compatability settings.

文档模式设置为IE7或IE8标准，然后border-radius-left：10px;不工作，但是如果标准模式设置为IE9标准或标准，则其表现如预期。

If the Document mode is set to IE7 or IE8 Standards then the border-radius-left: 10px; doesn't work, however if the standards mode is set to IE9 Standards or Standards then it behaves as expected.

这篇关于border-top-left-radius在IE中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！