css - Crear esquinas redondeadas en IE7/IE8

internet-explorer internet-explorer-8

Question

Estoy creando pestañas de esquinas redondeadas, que funcionan bien en IE9, Mozilla y Chrome, pero no en IE7 / IE8.

Aquí está el código:

<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;
}

¿Podrías decirme el código para que funcione también para IE7 / IE8?

Answer 1

IE 7/8 no admite border-radius . Escuché que IE9 sí lo hace.

Este sitio contiene un truco para obtener bordes redondeados en IE7 / 8: http://dimox.net/cross-browser-border-radius-rounded-corners/ . Deberá descargar border-radius.htc y colocar el siguiente código en su CSS:

.rounded-corners {
  behavior: url(http://yoursite.com/border-radius.htc);
}

Answer 2

Use jquery corner, funcionará en todos los principales navegadores

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

¡Incluso puedes configurar las esquinas de la manera que quieras!

Answer 3

Internet Explorer admite la propiedad CSS border-radius forma nativa hasta la versión 9. Para la versión inferior de IE, consulte el complemento jQuery mencionado kvijayhari, jQuery Corner .

Answer 4

radio de borde admitido ie-7, ie-8, ie-9 a través de javascript, compruebe este tutorial cómo mostrar el radio de borde en es decir, http://davidwalsh.name/css-rounded-corners

Answer 5

Hay las siguientes soluciones:

1. CSSPie (http://css3pie.com/ pero su archivo comprimido js tiene 40 KB de tamaño)

2. Hay otra solución que usa el archivo htc para IE

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

   La guía se puede encontrar aquí http://dimox.net/cross-browser-border-radius-rounded-corners/

3. Otra solución que personalmente recomiendo es:

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

   Es un archivo js sin comprimir de 10 KB de tamaño.