Question

我有一个网站在IE 10中完美地作为浏览器模式工作，IE5怪癖作为文档模式。但圆角在这种情况下不起作用。当我将文档模式更改为IE 9标准时，圆角正在工作。但我希望IE 5怪癖作为文档模式。

我的CSS是：

.roundedcorner
{
    behavior: url(/Includes/border-radius.htc);
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    border-radius: 30px;
    border-top-left-radius:30px;
    border-top-right-radius:30px;
    border-bottom-left-radius:30px;
    border-bottom-right-radius:30px;
}

Answer 1

Quirks模式不支持CSS3，CSS行为为disabled in IE10。您可以将标头设置为IE=edge并忘记Quirks模式。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

请看http://border-radius.com/。

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

Answer 2

试试这个

<!--[if gte IE 9]>
    <style>
        .roundedcorner{
            border-top-right-radius: 20px; 
            border-bottom-right-radius: 20px; 
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
    </style>
<![endif]-->

OR

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
.roundedcorner{
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
</style>

喜欢

<强> DEMO

Answer 3

将浏览器模式IE9与IE9 standards一起使用。这里的代码运行正常。此外，当它们都是30px时，无需将每个角定义为单独的属性，因此只需使用border-radius: 30px;。

CSS3圆角没有在IE怪癖模式下工作

3 个答案: