IE8 gradient de filtre ne fonctionne pas si une couleur de fond existe

Je suis en train d'utiliser le code CSS suivant les styles. Ils travaillent sur la plupart des navigateurs, y compris ie7. Toutefois, dans ie8, l'arrière-plan transparent ne montre pas et à la place je obtenir la couleur d'arrière-plan qui je voudrais laisser définir comme un secours de la couleur.

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 être en mesure d'obtenir que cela fonctionne sans avoir à recourir à une IE de la feuille de style où j'ai mis la couleur d'arrière-plan à aucun. Est-ce possible?

Ce que quelqu'un sait comment résoudre ce problème?

Puis-je suggérer à l'aide de CSS3Pie pour ces choses plutôt que de piratage avec les affreux de la syntaxe de filter. Ce ne sera pas directement de résoudre votre problème, mais peut rendre les choses plus facile de travailler avec.
Merci, seulement, je voudrais être laissés à trouver comment pirater CSS3Pie pleinement de travail ( css3pie.com/documentation/supported-css3-features/#rgba )...et je serais avec un 31k script (12k gzippé) pour faire face aux vs une ou deux lignes de css.
Êtes-vous à l'aide d'une cale ou display: block pour la SECTION tag?
ne pense pas que cela va résoudre le problème que vous rencontrez ou si c'est juste dans votre exemple; mais on ne devrait pas "zoom: 1" ont un point-virgule?
J'utilise les deux ( Modernizr + display: block dans mon css)

OriginalL'auteur uglymunky | 2010-12-22

28

Après en jetant un regard sur CSS3please j'ai réalisé que je faisais exagéré avec mon IE7/IE8 gradient de styles. Tout simplement en utilisant le style suivant fait le travail:
```
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
```
Apparemment, il n'est pas nécessaire pour l'-ms-filtre et le zoom règles.

Merci!!!! J'ai eu une image de fond d'écran de style pour les éléments de navigation qui n'ont pas l'affichage dans IE 6-9; ce DXImageTransform... appel a fait le tour! 🙂

OriginalL'auteur uglymunky
9

Juste d'ajouter ce que une mise à jour - je sais que les OP ont obtenu leur réponse, mais j'ai trouvé cette question, tout en essayant de comprendre pourquoi il (le "repli") était "encore du travail" en IE7, il me confond pas la fin, donc voici ce que j'ai trouvé.. il ne fonctionne pas correctement sous IE6/7...

IE8 est droit ici, ce que vous voyez (avec le code dans l'OP) dans IE8 est la couleur d'arrière-plan montrant à travers le filtre dégradé de superposition, et que c'est la même couleur qui rend le gradient de l'impression qu'elle 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 tort d'ignorer les secours (il n'est donc pas vraiment une solution de secours), et leurs arrière-plan transparent de couleur en raison d'un bogue, simplement parce que l'OP a les couleurs, les deux hex et RGBa spécifié à l'aide de background-color

Il existe de nombreuses façons de contourner ce.. voir: IE Fond RGB Bug - et le dernier commentaire en particulier des moyens - cette solution de contournement serait vraiment applicable en cas de non-utilisation des filtres et des gradients c'est à dire vraiment en utilisant simplement RGBa (semi-transparent) différents.

Si vous utilisez MS "filtre" des Gradients de simuler RGBa, Le MS filtres sont stables retour à IE5.5 donc, la réalité est qu'ils n'ont pas besoin de secours, et background: none; fed-à-dire uniquement les navigateurs, pour remplacer les secours nécessaires pour les autres navigateurs (bizarre hein!) est probablement la meilleure solution dans l'original en cas de secours, la couleur n'est nécessaire que pour les anciennes versions de navigateur de l'Opéra(surtout) & Firefox, Safari et al dans le cas de leurs gradients/rgba, en n'étant pas pris en charge.

OriginalL'auteur clairesuzy

Il apparaît, vous devez mettre de la largeur ou de la hauteur de la DIV CSS pour le gradient de travail dans IE 7+
( au moins j'ai eu à )

.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);
}

Espère que cette aide

OriginalL'auteur morgan_il

4

J'ai trouvé, j'ai dû changer le <a> élément de display:inline à display:block avant le filtre dans le style de travail. Aussi, la couleur peut être spécifiée avec 4 octets de la séquence 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;
```
display:inline-block; des œuvres pour IE9 et permet un point d'ancrage pour avoir une largeur par défaut et pas sur toute la largeur de l'écran. display:inline ou de ne pas spécifier l'affichage ne permet pas le filtre à fonctionner comme prévu.

OriginalL'auteur user982671
2

Vous utilisez Moderniste de mal. Moderniste lieux des cours sur l'élément HTML; pas chaque élément individuel. Voici ce que j'ai utilisé dans IE8 pour la couleur de la SECTION balises.
```
.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;
}
```
euh ouais, j'ai utilisé un mannequin de classe appelé .rgba pour aider à illustrer mon problème, mais vous apportez un point intéressant sur la façon de traiter avec ce css conflit en divisant les règles...vais essayer...merci

OriginalL'auteur Ryan
0

Le zoom de la règle est de s'assurer que hasLayout a été déclenchée, votre cas d'utilisation, ne pas avoir un besoin pour c'est probablement parce que hasLayout est déjà déclenchée.

concernant l'-ms - préfixe, selon la documentation de Microsoft ( http://msdn.microsoft.com/en-us/library/ms532847(v=vs. 85).aspx faites défiler jusqu'à "bas niveau de Soutien et de Internet Explorer 4.0 Filtres", sans ancrages je peux le lien), pour cibler IE8, on devrait être à l'aide de l'-ms - préfixe, pour cibler rien avant cela, on doit être à l'aide de la unprefixed un

OriginalL'auteur 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 */  
}

OriginalL'auteur j.ghadiri

0

La meilleure solution qui fonctionne pour IE7 et IE8 est d'utiliser un gradient de l'image et de définir repeat-x: true, tout en mettant à l'arrière-plan. Cela fonctionne pour tous les types de navigateur que j'ai trouvé.

OriginalL'auteur bearcatFulton

vous pouvez utiliser l'-ms-filter, mais je suppose que c'est la même question que l'opacité si vous ne filtre avant -ms-filter il ne parvient pas se plus:

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

de sorte que vous devez 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');

cela fonctionne pour moi

d'ailleurs que vous ne pouvez pas avoir un 8 char hexadécimal (hex est le mot latin pour six) et sur le dessus de ce que vous avez la même couleur de dégradé entre vous ont des couleurs différentes

OriginalL'auteur Simon Pertersen

Vous devez vous connecter pour publier un commentaire.