IE9 coins arrondis et filtre: progid: DXImageTransform.Microsoft.gradient
J'ai utilisé filter: progid:DXImageTransform.Microsoft.gradient
pour obtenir des dégradés pour IE <9.
Maintenant, lorsqu'il est combiné avec une ombre, ou un arrière-plan différent en dessous, je reçois la boîte à coller.
Est-il un moyen de garder la compatibilité ascendante, sans conditions et des feuilles de style externes?
Voir le code:
.class {
float:left;
border:solid 1px #AAA;
position:absolute;
z-index:1;
text-align:left;
width:350px;
margin: 12px 0px 0px 0px;
background:#FFFFFF;
border-radius:5px;
box-shadow:5px 5px 5px #BBBBBB;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f5f5f5, endColorstr=#FFFFFF);
}
<div class="class">this</div>
source d'informationauteur Jeffz
Vous devez vous connecter pour publier un commentaire.
Je le recommande (pour tout le monde!) à l'aide de Paul Irish technique qui ressemble à ceci:
dans votre code HTML.
Ensuite dans votre CSS, vous pouvez écrire des choses comme:
de cibler différents IEs. C'est une technique simple qui permet de résoudre beaucoup de problèmes (sans supplément de requêtes HTTP, un négligeable de code supplémentaire pour tous les navigateurs).
J'ai perdu mes coins rayon une fois que j'ai appliqué
filter: progid:DXImageTransform Microsoft.gradient...
. Je suppose que c'est un problème similaire.Pour le résoudre, j'ai utilisé une SVG de fond généré ici
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
C'est plus simple qu'il n'y paraît. Dans le CSS, il ressemble à
et lo, les coins ronds et dégradé.
$2c,
*-brochet
Je trouve quand IE me donne des problèmes avec des trucs à repousser les coins ronds, je le nid que l'intérieur d'un autre élément...
Ainsi, par exemple, je mettrais les coins ronds et de l'ombre portée sur l'élément extérieur avec la taille que je veux et overflow: hidden; Ensuite, mettre le dégradé sur un autre élément à l'intérieur. 100% ajustement.
peut-être pas la solution idéale, mais assez simple.