html - CSS3 y PIE no funcionan en IE 8
internet-explorer css3pie (6)
Im tratando de demo CSS3PIE y no funcionará en IE en absoluto.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link href="test.css" type="text/css" rel="stylesheet">
<title>Test</title>
</head>
<body>
<div id="title"></div>
<div id="sub_title"></div>
<div id="main_area">
<div id="date_area"></div>
</div>
</body>
</html>
css:
body{
margin: 0 auto;
}
#title{
margin: 0 auto;
width: 100%;
height: 40px;
background-color: white;
}
#sub_title{
margin: 0 auto;
width: 100%;
height: 25px;
background-color: green;
}
#date_area{
width: 310px;
height: 250px;
border: 1px solid #4A4949;
padding: 60px 0;
text-align: center;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: #707070 2px 2px 4px;
-moz-box-shadow: #707070 2px 2px 4px;
box-shadow: #707070 2px 2px 4px;
background: #EBEBEB;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EDEBEB), to(#C9C7C8));
background: -moz-linear-gradient(#EDEBEB, #C9C7C8);
background: linear-gradient(#EDEBEB, #C9C7C8);
-pie-background: linear-gradient(#EDEBEB, #C9C7C8);
behavior: url(/PIE.htc);
}
El resultado es solo un bloque con un borde, sin gradiente / sombra, etc.
Cualquier ayuda / solución sería muy apreciada.
Asegúrate de tener la última versión beta. Si el archivo HTC aún causa problemas, pruebe la implementación de JS.
Intenta borrar el caché en tu navegador. Especialmente cuando cambias de modo de compatibilidad. Realmente ayuda
La ubicación del behavior debe ser relativa a su archivo HTML, no su CSS como cualquier otra declaración usando url() . Entonces, suponiendo que index.html y PIE.htc están en la raíz y que su CSS está dentro de la carpeta ''css'', debería ir así:
background-image: url(../images/example.jpg);
behavior: url(PIE.htc);
Además, intente agregar un archivo .htaccess con el siguiente contenido en la misma ubicación que el archivo PIE.htc :
AddType text/x-component .htc
Espero que esto ayude.
Prueba agregar
position:relative;
z-index: 0;
como se sugiere aquí http://css3pie.com/forum/viewtopic.php?f=3&t=10
Esta pregunta es similar a la que se publica aquí: CSS3 PIE: ¿No está funcionando la compatibilidad con IE border-radius?
agregando: AddType text/x-component .htc - al archivo .htaccess funcionó como un encanto para mí.
La propiedad abreviada de CSS le permite controlar qué esquinas redondear o no.
border-radius: 0 15px 15px 0;/*(top-left, top-right, bottom-right, bottom-left). */
PIE CSS3: ¿No está funcionando la compatibilidad con IE border-radius?
Las solicitudes PIE.htc deben responder con el tipo de mime "text / x-component" - o IE no tocará el comportamiento.