|
Alors que la plupart des navigateurs majeurs soutiennent l' (Cascading Style Sheets) propriété CSS qui rendra éléments HTML avec des coins arrondis , Internet Explorer 8 et ci-dessous ne partagent pas cette caractéristique . Qui a laissé de nombreux développeurs Web à la recherche d'un moyen distinct d'offrir des coins arrondis dans Internet Explorer sans ajouter de frais généraux pour leur workflow. Heureusement, il existe plusieurs solutions JavaScript disponibles qui simulent le comportement de la propriété border- radius de la CSS. Instructions
1 Employer un plugin comme jQuery Plugin coin , si vous êtes un développeur qui utilise déjà jQuery sur son site. Téléchargez le plugin et placez le fichier (s) sur votre serveur Web , puis lier à eux au sein de la balise head de votre page. Par exemple, si les fichiers sont dans le même répertoire que la page:
;
Photos ensuite appeler la fonction jQuery qui va arrondir les angles dans Internet Explorer , à l'intérieur d'une balise script dans la tête de la page ou dans un fichier JavaScript externe. Avec jQuery Plugin angle , le code pourrait ressembler à ceci :
$ (" roundedBox . ») Coin ( "bottom 20px ");
La première section entre parenthèses identifie l'élément cible ( . s), dans ce cas, les éléments avec le nom de classe " roundedBox . " La deuxième section entre parenthèses est pour les options. Les options incluent le type d'angle , le coin ou les coins soient affectées et que le rayon de la courbe.
2 Choisissez une solution autonome, comme la bibliothèque JavaScript CurvyCorners . Téléchargez et un lien vers la bibliothèque dans la balise head de votre page. Par exemple:
Photos ensuite définir les attributs CSS border-radius pour les éléments qui devraient avoir des coins arrondis :
roundedBox . {
-webkit -border-radius : 20px;
-moz -border-radius : 20px; }
Photos la première propriété est pour les navigateurs basés sur WebKit , y compris Safari et Chrome, tandis que le second est pour les navigateurs basés sur Mozilla comme Firefox . CurvyCorners analyse le CSS, détecte ces définitions et les applique dans Internet Explorer.
3 Profitez de composants HTML , un mécanisme que Microsoft a développé pour intégrer le comportement dynamique dans ses pages Web. Les composants sont simplement des fichiers JavaScript avec une extension HTC . Qui affectent uniquement Internet Explorer. Un fichier libre. HTC qui ajoute un comportement de la propriété CSS border-radius a été libéré. Téléchargez le fichier et placez-le dans un endroit accessible sur l'espace Web , puis ajoutez une propriété " comportement " qui pointe vers le fichier htc côté de la CSS qui définit la propriété border-radius . . . Par exemple:
roundedBox {
-moz -border-radius : 20px;
-webkit -border-radius : 20px;
frontière radius : 20px;
comportement : url ( border- radius.htc ) ;
}
|
