HTML coins arrondis Internet Explorer

Question

Comment puis-je faire des coins arrondis comme ce site en propose à certains endroits ? J'ai cherché partout et j'ai trouvé beaucoup de codes que je ne sais plus lequel utiliser.

-moz-border-radius:10px;

-webkit-border-radius:10px;

behavior:url(border-radius.htc);

Lequel dois-je utiliser ? et pourquoi ne fonctionne-t-il pas avec Internet Explorer ?

Answer 1

Ces -moz- , -o- , -webkit- sont nécessaires pour prendre en charge les anciennes versions des navigateurs. Contrairement à la croyance populaire, le préfixe -ms- ne s'applique pas au préfixe border-radius propriété. Lorsque IE a commencé à prendre en charge les border-radius à la version 9, le système sans fournisseur border-radius a été utilisée Lien .

-moz-border-radius: 10px;    /* Gecko, Firefox */
-webkit-border-radius: 10px; /* Safari, chrome */
-o-border-radius?: 10px;     /* Opera */
border-radius: 10px;         /* Modern browsers*/

Answer 2

Internet Explorer 6-8 ne supporte pas css3, c'est pourquoi border-radius n'y travaille pas.

Pour Internet Explorer 9, vous pouvez obtenir des coins arrondis avec (sans fixation) border-radius propriété ( http://ie.microsoft.com/testdrive/HTML5/BorderRadius/ )

Pour les anciens navigateurs basés sur webkit, vous devez utiliser le préfixe -webkit.
Pour les anciens navigateurs basés sur Mozilla, vous devez utiliser le préfixe -moz.
Pour les anciennes versions du navigateur Opera, vous devez utiliser le préfixe -o.
Pour les autres, vous pouvez utiliser la propriété border-radius sans aucun préfixe.

Votre code inter-navigateurs doit ressembler au code ci-dessous

{
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

Pour les versions IE6-8, vous devez utiliser des plugins js comme http://css3pie.com/

Answer 3

Je recommande vivement CSS3PIE . Il peut être un peu bancal dans certaines circonstances avec l'opacité et autres, mais pour la grande majorité des sites, il permet de réduire considérablement le temps nécessaire à la réalisation d'un découpage.

Il suffit d'ajouter behaviour:url(/pie.htc); à la fin de votre déclaration CSS3 et IE prendra pleinement en charge les fonctions box-shadow, border-radius et les dégradés linéaires.

Answer 4

Wow beaucoup de doublons mais bon Voici le code tiré de jQuery UI Ce sont des déclarations CSS, vous devez les ajouter entre <style></style> ou à l'intérieur d'une feuille de style CSS et les lier à votre fichier HTML Ce que chacun fait est d'ajouter des coins à une région spécifique (en haut, en bas, en haut à gauche, en haut à droite, tous...).

Vous pouvez modifier le rayon partout pour les faire plier davantage.

.ui-corner-tl { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -ms-border-radius:8px; }
.ui-corner-tr { -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -ms-border-radius:8px; }
.ui-corner-br { -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-top { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-right {  -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; -ms-border-radius:8px; }
.ui-corner-left { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -ms-border-radius:8px; }
.ui-corner-all { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -ms-border-radius:8px; }

Je crois qu'il s'agit d'un logiciel multi-navigateurs, de sorte que les anciennes versions d'Internet Explorer pourraient ne pas fonctionner.