边界半径在IE10上不起作用

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标准，则边框半径5px无效，但是，如果将“标准”模式设置为IE9标准或“标准”，则其行为将与预期的一样。

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

乌鸦星68

Answer 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;

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

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

Answer 3

尝试仅使用border-radius：5px，然后可以使用吗？ 如果是这样，则逐个添加额外的边界半径属性，直到找到问题所在。 我怀疑这是引起问题的额外边界半径属性之一。 我怀疑该行为可能是问题的根源。