IE9的边界半径问题导致方向属性

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;

I've noticed IE9 changes the way it reads border radius values, in the case above it reads the top left as top right and the styled div would render in the other direction unlike chrome and moz! 我注意到IE9更改了它读取边界半径值的方式，在上面的情况下，它读取的是左上角作为右上角，并且样式div将在另一个方向上呈现，与chrome和moz不同！

any ideas? 有任何想法吗？

Answer 1

I would recommend that you just define top-right-border-radius and so on. 我建议您只定义top-right-border-radius等。 And don't remove the -moz- because a lot of Firefox users don't upgrade when they should. 并且不要删除-moz-因为许多Firefox用户在应有的时候都不会升级。

Or you can use IE conditional comments like so: 或者您可以使用IE这样的条件注释：

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

Answer 2

this is a bug in IE9 that occurs when the element has direction: rtl; 这是IE9中的错误，发生在元素具有direction: rtl; (either directly on the element with border-radius or inherited from a parent of that element). （或者直接在具有border-radius的元素上，或者从该元素的父元素继承而来）。

the solution is to apply direction: ltr; 解决方案是应用direction: ltr; on the element. 在元素上。

IE9的边界半径问题导致方向属性

问题描述

2 个解决方案

解决方案1
1 2012-05-30 12:29:41

解决方案2
0 2014-02-08 13:52:05

IE9的边界半径问题导致方向属性

问题描述

2 个解决方案

解决方案1 1 2012-05-30 12:29:41

解决方案2 0 2014-02-08 13:52:05

解决方案1
1 2012-05-30 12:29:41

解决方案2
0 2014-02-08 13:52:05