CSS3 et PIE ne fonctionnent pas dans IE 8

Im essayant de faire la démonstration CSS3PIE et il l'habitude de travailler dans IE.

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

Le résultat est tout simplement un bloc avec une bordure, pas de gradient de couleur/ombre etc

Toute aide/solution serait très apprécié.

source d'informationauteur Julio

  1. 34

    La behavior emplacement doit être par rapport à votre fichier HTML, pas votre CSS comme toute autre déclaration à l'aide de url(). Donc, en supposant que votre index.html et PIE.htc est dans la racine et votre CSS est à l'intérieur d'un 'css' dossier, vous devrait aller comme ça:

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

    Aussi, essayez d'ajouter un .htaccess fichier avec le contenu suivant dans le même emplacement que le PIE.htc fichier:

    AddType text/x-component .htc

    Espère que cette aide.

  2. 14

    Essayez d'ajouter

    position:relative;
z-index: 0;

    comme suggéré ici http://css3pie.com/forum/viewtopic.php?f=3&t=10

    Cette question est similaire à celui posté ici: CSS3 PIE - Donnant IE border-radius soutien ne fonctionne pas?

  3. 4

    CSS3 PIE - Donnant IE border-radius soutien ne fonctionne pas?

    La TARTE.htc demandes doivent répondre avec le type mime "text/x-component" - ou IE ne touche pas le comportement.

  4. 4

    ajoutant: AddType text/x-component .htc à la .htaccess fichier a fonctionné comme un charme pour moi.

    L'abréviation d'une propriété CSS vous permet de contrôler ce que les coins à tour ou pas.

    border-radius: 0 15px 15px 0;/*(top-left, top-right, bottom-right, bottom-left). */

  5. 2

    Essayer de vider le cache de votre navigateur. Spécialement lorsque vous basculez entre les modes de compatibilité. Il aide vraiment

  6. 0

    Assurez-vous que vous disposez de la dernière version bêta. Si le fichier HTC provoque toujours des problèmes, essayez de la JS mise en œuvre.