Saignement des bordures de rayon et du dégradé d'arrière-plan dans IE9

Question

IE9 est apparemment capable de gérer les coins arrondis en utilisant la définition standard CSS3 de l'expression border-radius .

Qu'en est-il du soutien au rayon des frontières y fond en dégradé ? Oui, IE9 supporte les deux séparément, mais si vous mélangez les deux, le dégradé déborde du coin arrondi.

Je constate également une bizarrerie avec les ombres qui apparaissent comme une ligne noire pleine sous une boîte aux coins arrondis.

Voici les images affichées dans IE9 :

Comment puis-je contourner ce problème ?

Answer 1

J'ai également travaillé sur ce problème. Une autre "solution" consiste à ajouter un div autour de l'élément qui présente le dégradé et les coins arrondis. Donnez à cette division les mêmes valeurs de hauteur, de largeur et de coins arrondis. Définissez l'overflow sur hidden. Il s'agit essentiellement d'un masque, mais cela fonctionne pour moi.

HTML :

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS :

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}

Answer 2

Voici une solution qui ajoute un dégradé d'arrière-plan, en utilisant une URI de données pour créer une image semi-transparente qui se superpose à n'importe quelle couleur de fond. J'ai vérifié que l'image s'ajuste correctement au rayon de la bordure dans IE9. C'est plus léger que les propositions basées sur le SVG mais, comme inconvénient, ce n'est pas indépendant de la résolution. Autre avantage : elle fonctionne avec votre HTML/CSS actuel et ne nécessite pas d'être enveloppée par des éléments supplémentaires.

J'ai pris un PNG gradient 20x20 aléatoire via une recherche sur le web, et je l'ai converti en données URI en utilisant un outil en ligne. L'URI de données résultant est plus petit que le code CSS de tout ce bazar SVG, et encore moins que le SVG lui-même ! (Vous pourriez appliquer cette méthode de manière conditionnelle à IE9 uniquement en utilisant des styles conditionnels, des classes css spécifiques au navigateur, etc.) Bien sûr, la génération d'un PNG fonctionne très bien pour les dégradés de la taille d'un bouton, mais pas pour les dégradés de la taille d'une page !

HTML :

<span class="button">This is a button</span>

CSS :

span.button { 
  padding: 5px 10px;
  border-radius: 10px;
  background-color: orange;  
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
  background-size: 100% 100%;

  border: 2px solid white;
  color: white;
}

Answer 3

Je pense qu'il est utile de mentionner que dans de nombreux cas, vous pouvez utiliser un box-shadow inséré pour "simuler" l'effet de dégradé et éviter les bords disgracieux dans IE9. Cela fonctionne particulièrement bien avec les boutons.

Voir cet exemple : http://jsfiddle.net/jancbeck/CJPPW/31/

Answer 4

Vous pouvez également utiliser CSS3 PIE pour résoudre ce problème :

http://css3pie.com/

Bien sûr, cela peut être excessif si vous ne comptez que sur un seul élément avec des coins arrondis et un dégradé d'arrière-plan, mais c'est une option à envisager si vous incorporez un certain nombre de fonctionnalités CSS3 courantes dans vos pages et que vous souhaitez une prise en charge facile d'IE6+.

Answer 5

J'ai aussi rencontré ce bug. Ma suggestion serait d'utiliser une image d'arrière-plan répétée pour le dégradé dans IE9. IE9 place correctement l'image derrière les bordures arrondies (à partir de la RC1).

Je ne vois pas en quoi écrire 100 lignes de code pour remplacer 1 ligne de CSS est simple ou élégant. SVG est cool et tout, mais pourquoi passer par tout cela quand des solutions plus simples pour les fonds dégradés existent depuis des années.