Utilisation de CSS3Pie htc pour border-radius dans IE8

Question

J'utilise le fichier htc CSS3Pie pour activer border-radius dans IE8, mais je ne reçois aucun effet. Mon CSS est:

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

J'ai mis PIE.htc à la racine publique (comme cela se fait sur la page de démonstration de CSS3PIE), après avoir essayé dans le même dossier, en utilisant une uri relative et une uri absolue.

Les démos fonctionnent; juste pas mon code!

Merci, Adam

Answer 1

Essayez d'ajouter

position:relative; 
z-index: 0; 

comme le suggère ici http://css3pie.com/forum/viewtopic.php?f=3&t=10

Cette question est similaire à celui affiché ici:

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

Answer 2

L'URL de PIE.htc comme référencé dans behavior: url(PIE.htc); est une URL relative, donc il recherche probablement dans le même répertoire que la feuille de style, donc je vous suggère d'ajouter une barre oblique en faire une URL absolue. Mais vous dites que vous avez déjà fait cela.

Vérifiez que l'URL spécifiée charge réellement le fichier PIE.htc, c'est-à-dire que vous insérez cette URL directement dans votre navigateur et que vous voyez ce qui en sort. Il est possible que votre serveur Web ne le serve pas correctement pour une raison ou une autre (ne pas reconnaître le type mime? Etc)

Avez-vous traversé le known problems on the PIE site? Avez-vous ajouté position:relative; à votre disposition? Pourrait-il être le numéro connu z-index?

Vous spécifiez que cela ne fonctionne pas dans IE8. L'avez-vous essayé dans IE7? IE6? Même résultat? (Cela permettra d'éliminer ths possibilité qu'il soit un problème spécifique à IE8)

D'ailleurs - point sans rapport, mais vous devez mettre le border-radius le style ci-dessous les versions avec les préfixes spécifiques au navigateur. C'est la manière standard de faire les choses, car cela signifie que lorsque Firefox prend en charge border-radius par exemple, le style standard est remplacé par -moz-border-radius. Si vous avez la version -moz ci-dessous, celle-ci continuera à être utilisée, ce qui peut ne pas être ce que vous voulez.

Answer 3

behavior: url(PIE.htc); 

Assurez-vous qu'il n'y a pas d'espace entre le url et ( comme cela l'empêche de fonctionner du tout dans IE8

Answer 4

Comme l'a déclaré Daniel Rehner, vous devez utiliser les propriétés position: relative et index z pour IE8. Si vous utilisez un site Web avec des sous-répertoires pour appeler le fichier CSS, vous devrez également utiliser un chemin absolu dans votre fichier CSS vers PIE.htc - c'était une partie de notre problème.

L'autre partie du problème pourrait être que votre serveur ne sort pas le fichier PIE.htc comme texte/x-composant. Vous pouvez corriger cela via IIS ou Apache, ou appelez le script PIE.php dans votre CSS. Plus d'informations ici: http://css3pie.com/documentation/known-issues/#content-type

Ces deux problèmes nous avaient bien accueillis, et nous espérons qu'ils vous aider.

Answer 5

Juste au cas où quelqu'un tente de l'appliquer à des cellules de tableau, vous aurez besoin d'appliquer position: relative à l'élément table (et non le td ou th, même si ce sont les éléments étant arrondis).

Answer 6

J'ai effectivement eu ce problème pour une raison complètement différente.

Le rayon de bordure ne fonctionnera pas si un filtre est appliqué au même élément. J'appliquais le border-radius à un bouton avec un gradient linéaire appliqué comme un filtre. Dès que j'ai enlevé le filtre, le rayon de la bordure a fonctionné.

Ceci est documenté le comportement et les gradients doit être appliqué en utilisant -pie-background:

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