Discussion :

[Emyleen]

Bonjour à tous,

Une titre bien long mais qui regroupe les mots-clés de ma problématique. J'ai lu un peu partout que certaines fonctionnalités css3 ne s'appliquent pas sous IE9. Pourquoi donc?

De plus je rencontre un problème que je n'arrive pas à comprendre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#contenuCatalogue .produit .alignDroite,
#produitsComplementaires .produit .alignDroite {
	background: #bcbcbc; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #bcbcbc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bcbcbc',GradientType=0 ); /* IE6-9 */
	border-radius: 0 0 10px 10px;
	behavior: url(/javascript/PIE-1.0beta4/PIE.htc);
    border-top: 1px solid #969696;
    float: none;
    height: 64px;
	position: relative;
	z-index: 1;
}

Le background en dégradé que j'applique à cette div s’arrondit comme voulu sur tout les navigateur sauf IE.
Un problème avec filter? Avec le navigateur?
De plus, si vous regardez bien j'utilise PIE pour essayer de contourner ce problème mais apparemment cela ne change rien puisque mon background dégradé déborde quand même au niveau des bords arrondis de ma div.

Une idée de solution? Je suis preneuse

[Invité]

Bonjour,
en regardant ici, on trouve cette syntaxe :

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);

[Emyleen]

Je viens de regarder les démos PIE, j'ai testé le site PIE sur IE9 et....le background dégradé ne fonctionne pas

Donc en fait, à l'heure actuelle, il semblerait que background dégradé, bordure arrondies et IE9 ne fassent pas bon ménage :s

[fabienlege]

Salut, je remonte ce vieux topic pour vous présenter une solution qui semble convenable pour les dégradés en css sous IE, compatible avec les border-radius et sans image !

je vous laisse regarder : http://ie.microsoft.com/testdrive/gr...r/default.html