superiores - Esquinas redondeadas CSS en IE8
quitar bordes redondeados css (6)
Estoy teniendo problemas con las esquinas redondeadas en IE8. Probé algunos métodos sin éxito.
Aquí está mi código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style>
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;
}
</style>
</head>
<body>
<div class="leftcolumn">
<div class="lefttop">
<H4 class="categoryheading3">Heading</H4>
<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p>
</div>
</div>
</body>
</html>
Lo que produce esto en Firefox:
Pero esto en IE8:
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;
}
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
Imagesesquinas redondeadas ( this generador es un buen recurso)Use un
jQuery Corner plugindesde hereUsa un script muy bueno llamado
CSS3 PIEdesde aquí (Pro''s & Con''s here )Caja
CSS Juicedesde hereOtro buen script es
IE-CSS3desde here
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!
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 this
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.
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.
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.
here funciona para IE 6+. Use esto si css3pie no funciona para usted.