web-dev-qa-db-fra.com

Le filtre dégradé IE8 ne fonctionne pas s'il existe une couleur d'arrière-plan

J'essaie d'utiliser les styles CSS suivants. Ils travaillent sur la plupart des navigateurs, y compris ie7. Toutefois, dans ie8, l’arrière-plan transparent ne s’affiche pas et j’obtiens plutôt la couleur d’arrière-plan que je souhaite laisser définie en tant que couleur de secours.

section.rgba{
    background-color: #B4B490;
    background-color: rgba(200, 0, 104, 0.4);  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
    zoom: 1
}

Je voudrais pouvoir obtenir que cela fonctionne sans avoir à recourir à une feuille de style IE dans laquelle je règle la couleur d'arrière-plan sur aucun. Est-ce possible?

Quelqu'un sait comment le réparer?

internet-explorer-8filtercss3gradientrgba
13
uglymunky

Après avoir jeté un coup d'œil sur CSS3please , j'ai réalisé que j'exagérais avec mes styles de dégradé IE7/IE8. Utiliser simplement le style suivant fait le travail: 

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');

Apparemment, les règles -ms-filter et zoom ne sont pas nécessaires.

28
uglymunky

Ajoutant simplement ceci comme une mise à jour - je sais que le PO a obtenu sa réponse, mais j’ai trouvé cette question tout en essayant de comprendre pourquoi il (la "solution de repli") fonctionnait même dans IE7. Cela m’a confondu sans fin alors voici ce que je découvert .. cela ne fonctionne pas correctement dans IE6/7 ...

IE8 a raison ici, ce que vous voyez (avec le code dans l'OP) dans IE8 est la couleur d'arrière-plan qui apparaît à travers la superposition du filtre de dégradé, et comme c'est la même couleur qui donne l'impression que le dégradé ne fonctionne pas et que tout ce que vous obtenez est la couleur unie. C'est ce qui devrait arriver dans tous les IE!

IE6 & 7 ignorent à tort le repli (donc ce n'est pas vraiment un repli) et ont leur couleur de fond transparente à cause d'un bogue, uniquement parce que l'OP a les couleurs, hex et RGBa spécifiées à l'aide de background-color

Vous pouvez contourner ce problème de différentes manières .. voir: IE Contexte RGB Bug - et le dernier commentaire, en particulier pour les opérations suivantes - cette solution de contournement ne serait réellement applicable que si vous n'utilisez pas de filtres/dégradés, par exemple vraiment en utilisant uniquement des arrière-plans RGBa (semi-transparents).

Si vous utilisez "les gradients" MS pour simuler la RGBa, les filtres MS étant stables en IE5.5, ils n'ont donc pas besoin de repli et background: none; est transmis aux seuls navigateurs IE, pour remplacer le repli requis. pour les autres navigateurs (bizarre, hein!) est probablement la meilleure solution dans le cas d'origine - Une couleur de secours n'est nécessaire que pour les anciennes versions de navigateur d'Opera (en particulier) et de Firefox, Safari et autres dans le cas de leurs dégradés/rgba pas encore prise en charge.

9
clairesuzy

Il semble qu’il faille mettre largeur ou hauteur sur DIV CSS pour que le dégradé fonctionne dans IE 7+ (Au moins, je devais le faire).

.widget-header {

    text-align: center;
    font-size: 18px;
    font-weight: normal;
    font-family: Verdana;
    padding: 8px;
    color: #D20074;
    border-bottom: 1px solid #6F6F6F;
    height: 100%;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #FFFFFF, #E2E2E2); 
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E2E2E2));
    /* MSIE */
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E2E2E2');
    /* Opera 11.10 + */
    background-image: -o-linear-gradient(top, #FFFFFF, #E2E2E2);
}

J'espère que cela t'aides

7
morgan_il

J'ai trouvé que je devais changer l'élément <a> de display:inline en display:block avant que le style de filtre ne fonctionne. En outre, la couleur peut être spécifiée avec une séquence de 4 octets où le premier octet est l'opacité, puis rgb, c'est-à-dire. #oorrggbb. Par exemple.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffA0C848', endColorstr='#ff70A828');
display:block;
4
user982671

Vous utilisez mal Modernizer. Modernizer place des classes sur l'élément HTML; pas chaque élément individuel. Voici ce que j'ai utilisé dans IE8 pour colorer les balises SECTION.

.rgba section {
    background-color: rgba(200, 0, 104, 0.4);
}
.no-rgba section {
    background-color: #B4B490;
}
.no-cssgradients section {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
    zoom: 1;
}
2
Ryan

vous pouvez utiliser le filtre -ms-filter mais je suppose que c'est le même problème que l'opacité si vous filtrez avant -ms-filter, il échoue plus à:

http://www.quirksmode.org/css/opacity.html pour cette théorie 

vous devez donc faire comme ceci: 

background-color: #D5D6D7;
background-image: linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -o-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -moz-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -ms-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(213,214,215)),
    color-stop(1, rgb(251,252,252))
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D5D6D7',EndColorStr='#FBFCFC')";
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D5D6D7', endColorstr='#FBFCFC');

ça marche pour moi

de plus, vous ne pouvez pas avoir un hexcode de 8 caractères (hex est latin pour six) et en plus vous avez la même couleur à dégradé entre vous devez avoir des couleurs différentes

0
Simon Pertersen

La meilleure solution pour IE7 et IE8 consiste à utiliser une image en dégradé et à définir repeat-x: true tout en la mettant à l'arrière-plan. Cela fonctionne pour tous les types de navigateurs que j'ai trouvés.

0
bearcatFulton

La règle de zoom consiste à s'assurer que hasLayout a été déclenché. Votre cas d'utilisation n'en ayant pas besoin, c'est probablement parce que hasLayout est déjà déclenché.

concernant le préfixe -ms-, selon la documentation de Microsoft ( http://msdn.Microsoft.com/en-us/library/ms532847(v=vs.85).aspx faites défiler vers le bas pour "Support technique et Internet Explorer 4.0 Filters ", aucune ancre ne peut être liée à), pour cibler IE8, on devrait utiliser le préfixe -ms-, pour cibler tout ce qui précède, on devrait utiliser celui qui n'a pas été préfixé

0
seutje
#element {  
    background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
    background: -ms-linear-gradient(black, white); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(black, white); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
    background: linear-gradient(black, white); /* the standard */  
}
0
j.ghadiri