6

我需要一个带有圆角的容器“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)。

4

3 回答 3

2

感谢Flipbed 的回答，我找到了答案。在 IE10 上，对我来说“边界半径”不起作用。为了让它工作，有必要指定每个角落：

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 发布。

于 2016-02-17T15:19:55.053 回答
1

尝试只使用border-radius: 5px，这样行吗？如果是这样，则将额外的border-radius属性一一添加，直到找到问题所在。我怀疑这是导致问题的额外边界半径属性之一。我怀疑这种行为可能是问题的根源。

于 2013-05-18T10:53:45.347 回答
1

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

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

如果文档模式设置为 IE7 或 IE8 标准，则边框半径 5px 不起作用，但如果标准模式设置为 IE9 标准或标准，则其行为与预期相同。

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

乌鸦星68

于 2013-08-26T16:37:46.350 回答