Internet Explorer 9 (и 10) отбрасывает мои закругленные углы назад

В основном, это означает, что верхний правый и нижний правые углы округляются, а не правильные верхние + нижние левые углы.

Здесь css:

.formlabel, .formlabel2, .formhead{
    width:200px;
    font-size:18px;
    height:22px;
    font-weight:normal;
    background-color:#FF8000;
    text-align:right;
    margin-top:5px;
    padding-right:1px;
    border:none;
    color:white;    
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

Из того, что я смог вывести, это происходит потому, что они находятся в пределах другого класса с атрибутом direction:rtl. Если я добавлю direction:ltr к вышеуказанным классам, то углы округляются правильно. (Вы можете попробовать это, используя приведенный выше код и добавив direction:rtl)

Проблема в том, что сайт находится на иврите, поэтому мне нужно, чтобы он оставался rtl.

Любые идеи?

Ответы

Ответ 1

Я бы подумал, что простым решением было бы разместить условный комментарий в <head> для IE9 +, чтобы использовать css, который вы изменили.

<!--[if gte IE 9]>
    <style>
        .formlabel, .formlabel2, .formhead{
            border-top-right-radius: 5px; /* switched from left */
            border-bottom-right-radius: 5px; /* switched from left */
        }
    </style>
<![endif]-->

Если вы предпочитаете вместо использования style в условном комментарии, вы можете ссылаться на отдельную внешнюю таблицу стилей.