Compatibilité CSS3 border-radius IE9 et background dégradé
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:
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 :)
