Utilisation de CSS3Pie htc pour border-radius dans IE8

Je suis en utilisant le CSS3Pie htc fichier pour activer border-radius dans IE8, mais je suis pas d'effet. Mon CSS est:

button {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    behavior: url(PIE.htc);
}

J'ai mis de la TARTE.htc dans le public de la racine (comme cela se fait sur la CSS3PIE page de démonstration), après avoir essayé, dans le même dossier, à l'aide d'un uri relatif et un uri absolu.

Les démos sont de travail; juste pas mon code!

Merci, Adam

source d'informationauteur Adam Hopkinson

  1. 29

    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?

  2. 4

    L'URL de la TARTE.htc référencés dans behavior: url(PIE.htc); est une URL relative, de sorte qu'il est probablement à la recherche pour elle dans le même répertoire que la feuille de style, j'aimerais suggérer l'ajout d'une barre oblique pour en faire une URL absolue. Mais vous dites que vous l'avez déjà fait.

    Vérifier que l'URL que vous spécifiez en fait de la charge de la TARTE.fichier htc - c'est à dire mettre l'URL directement dans votre browswer et voir ce qui vient. Il est possible que votre serveur web n'est pas de servir correctement pour une raison ou une autre (en ne reconnaissant pas le type mime? etc)

    Êtes-vous passés par la problèmes connus sur le site de la TARTE? Avez-vous ajouté position:relative; à votre style? Pourrait-il être connus z-index problème?

    Vous préciser que ça ne fonctionne pas avec IE8. Avez-vous essayé dans IE7? IE6? Même résultat? (cela permettra d'éliminer sat possibilité d'être un IE8 problème spécifique)

    Par ailleurs, sans rapport avec le point, mais vous devriez mettre la border-radius style ci-dessous les versions avec le navigateur préfixes spécifiques. C'est la façon habituelle de faire les choses, car cela signifie que lorsque, par exemple, Firefox commence à soutenir border-radiusil va ramasser le style standard sur -moz-border-radius. Si vous avez la -moz version ci-dessous, que l'on pourra continuer à être utilisé, ce qui peut ne pas être ce que vous voulez.

  3. 3

    Comme Daniel Rehner dit, vous devez utiliser la position: relative et z-index propriétés pour IE8. Si vous utilisez un site web, avec des sous-répertoires pour appeler le fichier CSS, vous aurez également besoin d'utiliser un chemin absolu dans votre CSS à TARTE.htc - ce est une partie de notre problème.

    L'autre partie du problème pourrait être que votre serveur n'est pas sortie de la TARTE.htc fichier en tant que text/x-composant. Vous pouvez corriger l'aide de IIS ou Apache, ou appelez le PIE.php script dans votre CSS. Plus d'infos ici: http://css3pie.com/documentation/known-issues/#content-type

    Ces deux questions avaient obtenu nous, et nous espérons qu'ils vous aider.

  4. 2

    J'ai effectivement eu ce problème pour une toute autre raison.

    Le border-radius ne fonctionnera pas si un filtre est appliqué à un même élément. J'ai été l'application de la border-radius à un bouton avec un dégradé linéaire appliquée comme un filtre. Dès que j'ai enlevé le filtre à l'border-radius travaillé.

    Cela est décrit un comportement et des gradients doit être appliqué à l'aide d' -pie-background:

    http://css3pie.com/documentation/supported-css3-features/#gradients

  5. 1
    behavior: url(PIE.htc);

    Assurez-vous il n'y a pas d'espace entre le url et ( que ce stopts de travailler dans IE8

  6. 1

    Juste au cas où quelqu'un essaie de l'appliquer à des cellules de tableau, vous aurez besoin d'appliquer position: relative à la table élément (et pas le tdou thmême si ceux-ci sont les éléments arrondis).