2010-11-09 4 views
9

Я хотел бы знать, как сделать закругленную границу в IE8. Я используюКак сделать округленную границу в IE8 с помощью CSS?

-moz-border-radius:4px; 
-webkit-border-radius:4px; 

для mozilla и сафари.

+0

Вот как вы можете сделать это с PURE CSS и БЕЗ JAVASCRIPT. Это гонг-шоу, и легко сломать, но, тем не менее, вот оно. [Чистые CSS закругленные углы без изображений и javascript] (http://www.worthapost.com/articles/pure-css-rounded-corners-without-images-and-javascript) –

ответ

6

Для этого есть плагин jQuery. http://jquery.malsup.com/corner/

+1

Он не спрашивал, как это сделать без CSS или с javascript. – Rob

+3

@Rob: другие ответы уже объяснили, что это невозможно реализовать в чистом CSS для IE8. –

+0

@Matt Ball спасибо за ваш путь. – kst

1

Вы не можете. IE не справляется с современными стандартами и практикой, и, в частности, такого свойства CSS в IE8 нет.

+0

Вы ** можете ** сделать это в CSS , это просто огромная боль в шее (слишком много тегов Div). Кроме того, вы используете CSS и круглые угловые изображения. –

0

В IE9 вы можете использовать радиус границы.

Для старых версий IE существуют библиотеки javascript, которые сделают это для вас. Вы не можете делать это исключительно с помощью CSS. По крайней мере вам понадобятся фоновые изображения.

+0

Вы ** можете ** делать это чисто в CSS, это просто огромный взлом и боль в шее (слишком много тегов div). Кроме того, вы используете CSS и круглые угловые изображения. –

+0

@rockinthesixstring - Действительно? Я думаю, если бы вы добавили достаточно div, с блочным и фоновым цветом ... – Moshe

+0

Я видел, как это было сделано ... это жестоко реализовать и легко сломать. –

3

Загрузить https://code.google.com/p/curved-corner/ и включить в свой проект. Затем используйте следующий css, чтобы иметь закругленный угол.

Например:

.somediv{ 
    -webkit-border-radius:4px;  /* older webkit based browsers */ 
    -khtml-border-radius:4px;   /* older khtml based browsers */ 
    -moz-border-radius:4px;   /* older firefox */ 
    border-radius:4px;    /* standard */ 
    behavior: url(border-radius.htc); /* IE 6-8 */ 
} 

URL-адрес к файлу относительно HTML-файл, который загружает CSS. Таким образом, это отличается от поведения background: url (...), относящегося к файлу CSS. Подробнее here

0

Вы можете использовать CSS3 PIE для этого. Его легко реализовать. Просто скачайте его здесь: http://css3pie.com/download/ и извлеките его содержимое. Затем, на вашей таблице стилей, просто поместите behavior:url(css3pie/PIE.htc); вместе с кодами CSS каждого элемента, который использует радиус границы.

Например:

.samplediv{ 
    behavior:url(css3pie/PIE.htc); 
    -webkit-border-radius:10px; 
    -khtml-border-radius:10px;  
    -moz-border-radius:10px;   
    border-radius:10px;    
} 
Смежные вопросы