Comment utiliser border-radius.htc avec IE pour faire des coins arrondis

Question

Comment utiliser border-radius.htc avec IE pour faire des coins arrondis

J'utilise border-radius.htc pour fixer border-radius dans IE

Cela fonctionne très bien ici http://www.faressoft.org/eshterakat/border-radius/border-radius.html

Mais cela ne fonctionne pas dans ma page html! Je ne sais pas pourquoi! http://www.faressoft.org/eshterakat/

-moz-border-radius:5px; 
-khtml-border-radius:5px; 
-webkit-border-radius:5px; 
border-radius:5px; 
behavior:url('Js/border-radius.htc'); 

/* I tried '../Js/border-radius.htc' it didn't work too */ 
/* I tried '/Js/border-radius.htc' it didn't work too */ 
/* I tried 'Js/border-radius.htc' it didn't work too */ 

Answer 1

Il y a 2 avec HTC gotchas;

• Le serveur doit serveur le HTC avec le type MIME correct (text/x-composant) si votre Apache ajouter ceci à votre config ou .htaccess: AddType text/x-composant .htc

• En CSS, les URL sont relatives au fichier CSS ... Les références HTC sont relatives à la page Calling HTML - soyez prudent.

Answer 2

Ceci est en fait quelque chose de spécifique, qui a été mentionné très brièvement. Lors de l'utilisation des composants HTC, vous devez vous assurer qu'ils se trouvent dans l'emplacement racine du site. Ensuite, vous devez simplement mentionner le comportement: url (css3orw/e.htc);

L'URL dans cette instance n'est pas la même avec la façon dont vous identifiez les images dans CSS. Cela n'aura jamais besoin de vous pour sortir une url (../../ asf.ext) etc que vous pouvez être habitué à travailler avec la nature relative des images dans css

Answer 3

Il suffit de modifier border-radius.htc

fill.color = fillColor; 

dans

fill.color = (fillColor=='transparent') ? 'none': fillColor; 

et changer et mettre fichier css et le fichier htc dans un même dossier pour exemple nom du dossier "cssSupport" puis son comme:

zoom:1; 
display: block; 
background-color:Transparent; 
border: 1px solid #696; 
-webkit-border-radius:8px; 
-moz-border-radius:8px; 
border-radius:8px; 
border-bottom-right-radius:8px; 
border-bottom-left-radius:8px; 
behavior:url(../CSS_Support/border-radius.htc); 

Essayez ceci. Ça va certainement marcher. Profitez d'IE8.