Радиус границы в IE7 +

Я хочу использовать закругленную угловую опору в IE7 & IE8. Для этого я использую файл border-radius.htc. Он отлично работает со всеми углами с одинаковым радиусом границы, но он не работает, если я изменяю радиус границы любого из углов. Мой код:Радиус границы в IE7 +

<!DOCTYPE html> 
<html> 
<head> 
<title>Border Radius for IE7+</title> 
<style> 
.borderRadius{ 
    background-color: #f0f0f0; 
    width: 300px; 
    height: 50px; 
    margin: 20px auto; 
    padding: 10px; 
    border: 1px solid #d7d7d7; 
    border-radius:10px; 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    behavior: url(border-radius.htc); 
} 
</style> 
</head> 
<body> 
    <div class="borderRadius"> 
     Content in Div. 
    </div> 
</body> 
</html>

Это прекрасно работает. Но это не сработает, если я сменил стиль на

<style> 
.borderRadius{ 
    background-color: #f0f0f0; 
    width: 300px; 
    height: 50px; 
    margin: 20px auto; 
    padding: 10px; 
    border: 1px solid #d7d7d7; 
    border-radius:10px 10px 0px 0px; 
    -webkit-border-radius:10px 10px 0px 0px; 
    -moz-border-radius:10px 10px 0px 0px; 
    behavior: url(border-radius.htc); 
} 
</style>

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

источник

2013-07-16 Saurabh

не используйте сокращенное обозначение для пограничного радиуса http://www.w3schools.com/cssref/css3_pr_border-radius.asp – Huangism

Может быть, что border-radius.htc сценарий содержит ошибки или не может иметь различные радиусы для каждого угла.

Я бы предложил попробовать альтернативный сценарий; там есть несколько, но лучший (длинный путь) - CSS3Pie - у него есть лот больше возможностей, чем любой другой похожий скрипт, он работает лучше и хорошо проверен, поэтому, вероятно, меньше ошибок и причуды. Это тоже единственное, что я знаю об этом, все еще находится в активном развитии. Я настоятельно рекомендую.

В теории, это должен быть простой случай замены существующего behavior() для ссылки на файл PIE.htc, а затем на работу оттуда.

Это точно должно работать с кодом для различных границы радиусов:

border-radius:10px 10px 0px 0px;

Надежда, что помогает.

источник

2013-07-16 20:19:37 Spudley

Он работал правильно. Спасибо за помощь. – Saurabh

Попробуйте это: http://jsfiddle.net/jplahn/62ESq/

я сильно преувеличены радиусы так, чтобы вы могли видеть, что это работает, но дать, что выстрел.

CSS:

.borderRadius{ 
    background-color: #f0f0f0; 
    width: 300px; 
    height: 50px; 
    margin: 20px auto; 
    padding: 10px; 
    border: 1px solid #d7d7d7; 

    -webkit-border-top-left-radius:100px; 
    -webkit-border-top-right-radius:100px; 
    -webkit-border-bottom-left-radius:25px; 
    -webkit-border-bottom-right-radius:5px; 
    -moz-border-radius:10px 10px 0px 0px; 
    behavior: url(border-radius.htc); 
}

источник

2013-07-16 19:51:39

Радиус границы в IE7 +

ответ

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