Internet Explorer 9 (и 10) рендерит мои закругленные углы задом наперед - PullRequest
Новая
       11

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

10 голосов
/ 12 сентября 2011

По сути, это делает верхний правый и нижний правый углы круглыми вместо правильных верхних + нижних левых углов.

Вот 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 Ответ

1 голос
/ 12 сентября 2011

Я бы подумал, что простым решением было бы поместить условный комментарий в <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 в условном комментарии вы можете вместо этого ссылаться на отдельную внешнюю таблицу стилей.

...