Question

direction: rtl;
font-size: large;
-webkit-border-radius: 0px 50px 50px 0px;
-moz-border-radius: 0px 50px 50px 0px;
border-radius: 0px 50px 50px 0px;

我注意到IE9改变了它读取边界半径值的方式，在上面的情况下，它读取左上角为右上角，样式div将在另一个方向上渲染，不像chrome和moz！

任何想法？

Answer 1

我建议你只定义top-right-border-radius等等。并且不要删除-moz-，因为很多Firefox用户都不应该升级。

或者你可以这样使用IE conditional comments：

<html>
    <head>
        <style>
            property: value;
        </style>
        <!--[if IE]>
            <style>
                ie-only-property: value;
            </style>
        <![endif]-->
    </head>
    <body>
        Page text here
    </body>
</html>

Answer 2

这是IE9中的一个错误，当元素具有direction: rtl;时（直接在具有border-radius的元素上或从该元素的父元素继承）。

解决方案是在元素上应用direction: ltr;。

使用IE9的border-radius问题的direction属性

2 个答案: