Esquinas redondeadas CSS en IE8

Estoy teniendo problemas con las esquinas redondeadas en IE8. Probé algunos métodos sin éxito.

Aquí está mi código:

  Untitled Page  body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; padding: 2px; margin: 2px; color: #505050; line-height: normal; } p { margin: 4px; } .categoryheading3 { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; background-color: #297BB6; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; margin: 0px; } .leftcolumn { width: 174px; padding: 8px; float: left; display: inline-block; background-color: transparent; /*--min-height: 500px*/ overflow: hidden; } .lefttop { display: inline-block; width: inherit; margin: 0 5px 2em 0; float: left; width: 160px; background-color: #FFFFFF; border: 2px solid #297BB6; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }    

Heading

sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text

Lo que produce esto en Firefox:

Ejemplo de Firefox

Pero esto en IE8:

IE8 me pone triste

Si alguien tiene algún consejo, ¡estaría muy agradecido!

edit: Joseph ayudó sugiriendo usar pie.htc, sin embargo, todavía estoy luchando con este elemento que no funciona:

 .categoryheading3 { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; behavior: url(PIE.htc); background-color: #297BB6; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; margin: 0px; } 

Internet Explorer (en la versión 9) no admite nativamente esquinas redondeadas.

Hay un guión increíble que mágicamente se lo agregará: pastel CSS3 .

Lo he usado muchas veces, con resultados sorprendentes.

Esquinas redondeadas en IE8

Internet Explorer 8 (y versiones anteriores) no admite esquinas redondeadas, sin embargo , hay algunas otras soluciones que puede considerar:

  • Utilice en su lugar Images esquinas redondeadas ( este generador es un buen recurso)

  • Use un jQuery Corner plugin desde aquí

  • Usa un script muy bueno llamado CSS3 PIE desde aquí (Pro’s & Con’s aquí )

  • Caja CSS Juice desde aquí

  • Otro buen script es IE-CSS3 desde aquí

A pesar de que CSS PIE es la solución más popular, le sugiero que revise todas las demás soluciones y elija la que mejor se adapte a sus necesidades.

Espero que haya sido útil. ¡Buena suerte!

No sabía sobre css3pie.com, un sitio muy útil después de ver esta publicación:

Pero lo que después de probarlo tampoco funcionó para mí. Sin embargo, encontré que envolverlo en el archivo .PHP funcionó bien. Entonces, en lugar de:

 behavior: url(PIE.htc); 

utilizar esta:

 behavior: url(PIE.php); 

Puse el mío en una carpeta llamada jquery, así que la mía era:

  behavior: url(jquery/PIE.php); 

Así que vaya a sus descargas o consíguelo aquí:

http://css3pie.com/download-latest

Y usa su archivo PHP. Dentro del archivo PHP, explica que algunos servidores no están configurados para un uso adecuado de .HTC. Y ese era el problema que tenía.

¡Intentalo! Lo hice, funciona. Espero que esto ayude a otros también.

http://fetchak.com/ie-css3/ funciona para IE 6+. Use esto si css3pie no funciona para usted.

PIE.htc funcionó para mí genial ( http://css3pie.com/ ), pero con un problema:

Debería escribir la ruta absoluta a PIE.htc. No funcionó para mí cuando utilicé la ruta relativa.

Como Internet Explorer no admite nativamente esquinas redondeadas. Entonces, una mejor forma de manejarlo sería usar imágenes de esquina redondeada en las esquinas. Muchos sitios web famosos usan este enfoque.

También puede encontrar generadores de imágenes redondeadas en la web. Uno de esos enlaces es http://www.generateit.net/rounded-corner/