2013-05-18 5 views
6

Мне нужно иметь контейнер «DIV» с закругленными углами. Следующий код отлично работает во всех браузерах, кроме моего IE10. Я не знаю, как это сделать, чтобы заставить его работать.border-radius не работает на IE10

#about-kader { 
    width: 200px; 
    height: 180px; 
    float: left; 
    margin: 0px auto; 
    background-color: #9bafc4; 
    padding: 3px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    -ms-border-radius: 5px; 
    behavior: url(border-radius.htc); 
} 

А вот HTML часть, пожалуйста:

<div id="about-kader"> 
... 
... 
... 
</div> 

Там нет никакого способа, чтобы сделать любой круглый угол виден на IE10. Версия у меня: 10.0.9200.16576, версии для обновления: 10.0.5 (KB289530).

+0

Если ваше решение действительно работает, отправьте его как ответ и примите его в качестве ответа. – Tass

ответ

0

Попробуйте использовать только радиус границы: 5px, тогда он работает? Если это так, добавьте дополнительные свойства радиуса радиуса один за другим, пока не найдете, где возникает проблема. Я подозреваю, что это один из дополнительных свойств радиуса радиуса, вызывающий проблему. Я подозреваю, что это может быть причиной проблемы.

+0

К сожалению, только с "border-radius: 5px;" он не работает – Tiz

+0

Попробуйте просто создать радиус этой страницы и посмотреть, работает ли она. http://border-radius.com/ – Flipbed

+0

Да с этим он работает. Это увеличивает мою озабоченность, потому что, насколько я вижу, инструкция - это только радиус границы: 5px; Я попробовал также ширину 30px на странице, которую вы связали, и она работает. Я не знаю, где я ошибся. – Tiz

1

Поведение радиуса границы зависит от режима совместимости в IE10.

Если вы нажмете F12, вы можете просмотреть консоль разработчика и изменить параметры совместимости.

Если в режиме документа установлены стандарты IE7 или IE8, то радиус 5px границы не работает, однако если режим стандартов установлен в соответствии со стандартами или стандартами IE9, он ведет себя так, как ожидалось.

Я закончил тем, что отключил режим совместимости, так как он также нарушает поведение других веб-сайтов, которые я использую.

Ravenstar68

1

Благодаря Flipbed's answer я нашел ответ. В IE10 «border-radius» мне не работает. Для того, чтобы заставить его работать, необходимо указать каждый угол:

border-top-left-radius:5px; 
border-top-right-radius:5px; 
border-bottom-left-radius:5px; 
border-bottom-right-radius:5px; 

Действительно сайт вы послали, это точно, что (посмотреть исходный код страницы). В качестве вывода выдается инструкция:

border-radius: 5px; 

, но внутренне он объявляет 4 угла отдельно, как указано выше.

Это было извлечено из вопроса и опубликовано от имени ФП.

Смежные вопросы