CSS3 y PIE no funciona en IE 8

Im tratando de demo CSS3PIE y no funciona en IE en absoluto.CSS3 y PIE no funciona en IE 8

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 simplemente una manzana con un borde, sin gradiente/sombra etc

Cualquier ayuda/solución sería muy apreciada.

Fuente

2011-01-11 Julio

alguna razón para no usar 'filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# EDEBEB', endColorstr = '# C9C7C8', GradientType = 0);'? –

La ubicación behavior debe ser relativa a su archivo HTML, no su CSS como cualquier otra declaración usando url(). Así que asumiendo que su index.html y PIE.htc está en la raíz y el CSS se encuentra dentro de una carpeta 'css', hay que ir como esto:

background-image: url(../images/example.jpg); 
behavior: url(PIE.htc);

También, trate de añadir un archivo .htaccess con el siguiente contenido en la misma ubicación que el PIE.htc file:

AddType text/x-component .htc

Espero que esto ayude.

Fuente

2011-01-12 19:13:03

Eso lo arregló en IE10 para el modo de compatibilidad IE8, pero no en el IE8 real ... ¿alguna idea? – DrCord

@DrCord wow, no sabía eso ... No estoy seguro de eso ya que actualmente no estoy confiando en CSS3PIE. Apoyo IE8 + y código una sólida estructura de diseño; con respecto a los "efectos visuales sofisticados": lo que funciona en IE, funciona en IE, y lo que no, no es gran cosa, el diseño se ve bien de todos modos. –

Ese archivo htaccess hizo el trabajo por mí, gracias – Metzed

Asegúrese de tener la última versión beta. Si el archivo HTC aún causa problemas, pruebe la implementación de JS.

Fuente

2011-01-11 23:01:41 Adam

CSS3 PIE - Giving IE border-radius support not working?

Las solicitudes PIE.htc debe responder con el tipo MIME "text/x-componente" - o IE no tocarán el comportamiento.

Fuente

2011-01-12 00:22:59 drudge

Trate de añadir

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 publicada aquí: CSS3 PIE - Giving IE border-radius support not working?

Fuente

2011-01-13 23:38:29

. Lo hice por mí. – Zabba

resolvió mi misterio ... – Vad

^este chico es un salvavidas! –

tratar de limpiar la caché de su navegador. Especialmente cuando cambias de modo de compatibilidad. Realmente ayuda

Fuente

2011-12-02 10:00:44 cmms

Esto debería ser como comentario, no como respuesta. –

sumando: 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). */

Fuente

2011-12-12 20:28:37 Tom

Respuesta

Cuestiones relacionadas