Est-ce que quelqu'un sait si / quand Internet Explorer prendra en charge l'attribut CSS "border-radius"?
Prise en charge de «border-radius» dans IE
Réponses:
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.
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
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
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
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
@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
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).
Pendant que vous attendez. Angle incurvé (rayon de bordure)
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.
CSS3 PIE était de loin l'option la plus simple et la moins intrusive pour cela.
—
Chris Rasco
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
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
Il s'avère que IE8 est la dernière version ... pour Windows XP.
—
M. Dudley
Mise à jour rapide de cette question, IE9 prendra en charge border-radius selon: http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx
Utilisez -ms-border-radius: 15px, tout élément qui utilise css -ms- est compatible avec IE.
Le problème du rayon d'angle d'IE va être résolu.
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
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
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:
- Cliquez sur la roue dentée en haut à droite du navigateur IE
- Cliquez sur Paramètres d'affichage de compatibilité
- Désactivez maintenant les 2 cases cochées par défaut.
