Как исправить радиус границы в IE8 (ie7, ie6)

Question

Я использую этот CSS:

    #main{  
        border-radius: 50px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
            -webkit-border-radius: 50px;
            -webkit-border-bottom-right-radius: 4px;
            -webkit-border-bottom-left-radius: 4px;
            -moz-border-radius: 50px;
            -moz-border-radius-bottomright: 4px;
            -moz-border-radius-bottomleft: 4px;
    }

Он отлично работает в FF, Chrome, IE9 (я думаю) и Safari ... Но в IE8 это так уродливо,

Есть пользователи, использующие IE8, я пробовал .htc файл , но он не поддерживает border-bottom-right-radius и border-bottom-left-radius ...

Яищу файл JS или HTC, который поддерживает это (или другое решение для этого), он мне нужен только для IE8, но замечательно, если он также поддерживает IE6 и IE7!

Спасибо!

Answer 1

Вы можете попробовать CSS Pie .Я не использовал его, поэтому я не могу ручаться за это.

В целом, хотя: я бы позволил этому уйти.Отсутствие закругленных углов не помешает пользователям IE8.Более способные браузеры получают лучший опыт.Прогрессивное улучшение - прекрасная вещь.

Answer 2

используйте сделать кривую рамку .ping изображения в фотошопе и используйте его ..... потому что border-radius-bottomleft, border-radius-bottom right и т. Д. Не работают на ie6-8 .... только границасвойство -radius работает в ....

ЭТО НЕВОЗМОЖНО РЕШИТЬ ЭТУ ПРОБЛЕМУ С ИСПОЛЬЗОВАНИЕМ CSS ИСПОЛЬЗОВАТЬ ЭТУ ТРИК* border-radius-bottom right * / не работает в ie6-8

Answer 3

border-bottom-right-radius Поддержка браузера:

border-bottom-right-radius поддерживается как есть в Opera 10 .

Чтобы заставить его работать в Firefox и Safari, вы должны использовать два связанных свойства:

-moz-border-radius-bottomright - для Firefox 3 +

-webkit-border-bottom-right-radius - для Safari 2 +

Должно поддерживаться Internet Explorer 9 .

border-bottom-right-radius Примеры:

Создать стандартный закругленный угол:

border-bottom-right-radius:1em;
-moz-border-radius-bottomright:1em;
-webkit-border-bottom-right-radius:1em;

Чтобы создать более мелкую кривую:

border-bottom-right-radius:1.6em 1em;
-moz-border-radius-bottomright:1.6em 1em;
-webkit-border-bottom-right-radius:1.6em 1em;

Граница-нижний-правый-радиус Специальные примечания : Не забудьте установить стили -moz и -webkit, а также базовую границу-нижний-правый-радиус, чтобы ваши кривые отображались в большинстве современных браузеров.