Создание закругленных углов в IE7 / IE8 - PullRequest
Новая
       26

Создание закругленных углов в IE7 / IE8

9 голосов
/ 04 августа 2011

Я создаю вкладки с закругленными углами, которые отлично работают в IE9, Mozilla и Chrome, но не в IE7 / IE8.

Вот код: 

<div id="navbar">
<div id="holder">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</div>

#navbar {}
#holder {
border-bottom:1px solid #000;
overflow:hidden;
}

#navbar #holder ul {
margin:0;
padding:0;
list-style:none;
margin-top:15px;
}

#navbar #holder ul li { }
#navbar #holder ul li a {
text-decoration:none;
float:left;
margin-right:5px;
border:1px solid #000;
padding:15px;
text-align:center;
width:90px;
border-bottom:none;
display:block;
behavior:url(border-radius.htc);
border-radius:5px 5px 0 0;
}

#navbar #holder ul li a:hover {
background:#C09;
color:#fff;
}

Не могли бы вы сообщить мне код, чтобы он работал и для IE7 / IE8?

Ответы [ 5 ]

8 голосов
/ 04 августа 2011

Используйте угол jquery, он будет работать на всех основных браузерах

http://jquery.malsup.com/corner/

Вы можете даже настроить углы так, как вам нравится !!

7 голосов
/ 04 августа 2011

IE 7/8 не поддерживает border-radius.Я слышал, что IE9 делает.

Этот сайт содержит взлом для получения округленных границ в IE7 / 8, хотя: http://dimox.net/cross-browser-border-radius-rounded-corners/Вам нужно скачать border-radius.htc и вставить следующий код в ваш CSS: 

.rounded-corners {
  behavior: url(http://yoursite.com/border-radius.htc);
}
5 голосов
/ 05 июня 2012

Существуют следующие решения:

  1. CSSPie (http://css3pie.com/, но его сжатый js-файл имеет размер 40 КБ)

  2. Существует другое решение, использующее файл htc дляIE 

        behavior: url(http://yoursite.com/border-radius.htc);
         (almost 40 KB of size)

    Руководство можно найти здесь http://dimox.net/cross-browser-border-radius-rounded-corners/

  3. Другое решение, которое я лично рекомендую: 

         jquery.corner.js (http://jquery.malsup.com/corner/)

    Это несжатый файл jsРазмер 10 КБ.

2 голосов
/ 31 мая 2012

Поддерживается радиус границы, т.е. -7, то есть-8, то есть-9 с помощью javascript. Проверьте этот учебник, как показать радиус границы, например, http://davidwalsh.name/css-rounded-corners

0 голосов
/ 04 августа 2011

Internet Explorer поддерживает свойство CSS border-radius изначально только до версии 9. Для более низкой версии IE, проверьте упомянутый плагин jQuery kvijayhari, jQuery Corner .

...