Question

我需要一个带圆角的容器“DIV”。以下代码适用于除IE10以外的所有浏览器。我不知道怎么做才能让它发挥作用。

#about-kader {
    width: 200px;
    height: 180px; 
    float: left;
    margin: 0px auto;
    background-color: #9bafc4;
    padding: 3px;
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px;
    -ms-border-radius: 5px;
    behavior: url(border-radius.htc);
}

这是HTML部分，请：

<div id="about-kader">
...
...
...
</div>

在IE10上无法显示任何圆角。我的版本是：10.0.9200.16576，更新版本：10.0.5（KB289530）。

Answer 1

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

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

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

我最终关闭了兼容模式，因为它也破坏了我使用的其他网站的行为。

Ravenstar68

Answer 2

感谢Flipbed's answer我找到了答案。在IE10上，对我来说“border-radius”不起作用。为了使其工作，有必要指定每个角落：

border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;

确实，您发送的网站确实如此（查看网页来源）。它给出了输出指令：

border-radius: 5px;

但在内部它分别如上所述声明了4个角。

_{这是从问题中提取的，并代表OP发布。}

Answer 3

只尝试使用border-radius：5px，它能用吗？如果是，则逐个添加额外的border-radius属性，直到找到问题出现的位置。我怀疑这是导致问题的额外border-radius属性之一。我怀疑这种行为可能是问题的根源。

border-radius在IE10上不起作用

3 个答案: