Prise en charge de «border-radius» dans IE

158

Est-ce que quelqu'un sait si / quand Internet Explorer prendra en charge l'attribut CSS "border-radius"?

Tony le poney
la source

Réponses:

220

Oui! Lors de la sortie d'IE9 en janvier 2011.

Disons que vous voulez un même 15px sur les quatre côtés:

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 utilisera la valeur par défaut border-radius, alors assurez-vous simplement de l'inclure dans tous vos styles en appelant un rayon de bordure. Ensuite, votre site sera prêt pour IE9.

-moz-border-radiusest pour Firefox, -webkit-border-radiusest pour Safari et Chrome.

De plus: n'oubliez pas de déclarer que votre codage IE est ie9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Certains développeurs paresseux l'ont fait <meta http-equiv="X-UA-Compatible" content="IE=7" />. Si cette balise existe, border-radius ne fonctionnera jamais dans IE.

Kevin Florida
la source
7
Vraisemblablement, si vous n'utilisez pas la balise meta compatible X-UA, vous n'avez pas besoin de l'ajouter juste pour la faire fonctionner dans IE9?
thepeer
72
Vous devriez mettre les versions de préfixe du fournisseur en PREMIER et la version DERNIÈRE standard de sorte que si le navigateur prend en charge la norme actuelle, il l'utilisera au lieu de sa version préfixée par le fournisseur.
Jason Berry
4
Corrigez vous n'avez pas besoin de la balise meta .. vous n'avez besoin de remplacer l'émulateur ie7 que s'il est inclus. Sinon, ne vous en faites pas.
Kevin Florida
3
FYI dans la version bêta actuelle d'IE9 'border-radius' fonctionne correctement en utilisant une seule valeur. Les quatre valeurs ne sont pas obligatoires, sauf si vous souhaitez réellement qu'elles soient différentes.
mikemaccana
2
@nailer: Merci d'avoir mis à jour les coins. Les premiers alpha vs et beta vs d'IE9 nécessitaient la déclaration des 4 coins. Je viens de télécharger le dernier ie9 RC et il me permet de déclarer une valeur .. Je ne sais pas quand cela a changé ..
Kevin Florida
46

La réponse à cette question a changé depuis qu'elle a été posée il y a un an. (Cette question est actuellement l'un des meilleurs résultats pour Google "border-radius ie".)

IE9 prendra en charge border-radius.

Il existe un aperçu de la plate-forme disponible qui prend en charge border-radius . Vous aurez besoin de Windows Vista ou Windows 7 pour exécuter l'aperçu (et IE9 lors de sa sortie).

David Johnstone
la source
18

Une solution de contournement et un outil pratique:

CSS3Pie utilise des fichiers .htc et la propriété behavior pour implémenter CSS3 dans IE 6-8 .

Modernizr est un peu de javascript qui mettra des classes sur votre élément html, vous permettant de servir différentes définitions de style à différents navigateurs en fonction de leurs capacités.

De toute évidence, ces deux ajouts ajoutent plus de frais généraux, mais avec IE9 qui ne fonctionne que sur Vista / 7, nous pourrions être bloqués pendant un certain temps. En août 2010, Windows XP représentait toujours 48% des systèmes d'exploitation des clients Web.

Peter G
la source
2
CSS3 PIE était de loin l'option la plus simple et la moins intrusive pour cela.
Chris Rasco
12

Ce n'est pas prévu pour IE8. Consultez la page de compatibilité CSS .

Au-delà de cela, aucun plan n'a été publié. Des rumeurs existent selon lesquelles IE8 sera la dernière version de Windows XP

Ben S
la source
12
Vous vous trompez évidemment, car IE9 est censé prendre en charge CSS3 aussi, et je ne vois pas IE mourir nulle part. Quelqu'un pls tuer IE
Starx
10
Il s'avère que IE8 est la dernière version ... pour Windows XP.
M. Dudley
7

<!DOCTYPE html> sans cette balise border-radius ne fonctionne pas dans IE9, pas besoin de balises meta.

JAVAC
la source
4

Utilisez -ms-border-radius: 15px, tout élément qui utilise css -ms- est compatible avec IE.

Iago Bruno
la source
2

Qu'en est-il de la prise en charge du rayon de bordure ET du dégradé d'arrière-plan. Oui, IE9 doit les supporter tous les deux séparément, mais si vous mélangez les deux, le dégradé saigne du coin arrondi. Vous trouverez ci-dessous un lien vers un exemple médiocre, mais je l'ai également vu dans mes propres tests. Devrait prendre une capture d'écran :(

Peut-être que la vraie question est de savoir quand IE prendra-t-il en charge les normes CSS sans les hacks propriétaires MS-FILTER?

http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx

SigmaBetaTooth
la source
IE10 prendra en charge les dégradés CSS3 appropriés (l'aperçu actuel du développeur IE10 le fait déjà via -ms-linear-gradient). Si vous voulez des dégradés qui honorent border-radius dans IE9, vous devez utiliser SVG (soit un fichier SVG externe ou un fichier encodé dans un URI de données) - voir css3wizardry.com/2010/10/29/css-gradients-for- ie9 - également CSS3 PIE va bientôt automatiser cela, il y a une version de test disponible
lojjic
Une solution rapide consiste à l'envelopper dans un autre élément. Donnez à l'élément parent le même rayon de bordure et définissez son débordement sur masqué.
Senne
1

RÉSOLU - ne rend pas correctement le rayon de la bordure dans IE 10 et 11

Pour ceux qui n'obtiennent pas le -ms-border-radius: ou le border-radius: pour travailler dans IE 10,11 Et il rend tout carré, puis suivez ces étapes:

  1. Cliquez sur la roue dentée en haut à droite du navigateur IE
  2. Cliquez sur Paramètres d'affichage de compatibilité
  3. Désactivez maintenant les 2 cases cochées par défaut.

Assurez-vous que les cases ne sont pas cochées comme sur la photo

Allan Starr
la source