IE8 Gradientenfilter funktioniert nicht, wenn eine Hintergrundfarbe vorhanden ist

Question

Ich versuche, die folgenden CSS-Stile zu verwenden. Sie arbeiten mit den meisten Browsern, einschließlich ie7. In ie8 wird der transparente Hintergrund jedoch nicht angezeigt und stattdessen bekomme ich die Hintergrundfarbe, die ich als Fallback-Farbe beibehalten möchte.

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 
} 

Ich mag wäre in der Lage sein, dies ohne zu einem IE Sheet zu müssen zu arbeiten, um zu bekommen, wo ich die Hintergrundfarbe auf none gesetzt. Ist das möglich?

Weiß jemand, wie man es repariert?

Answer 1

Nachdem bei CSS3please Blick über mir klar, ich mit meinen IE7/IE8 Gradienten Arten Overkill tat. macht den Job einfach mit dem folgenden Stil:

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

Offensichtlich gibt es keine Notwendigkeit für die -ms-Filter und Zoom-Regeln.

Answer 2

Sie verwenden Modernisierer falsch. Modernisierer platziert Klassen für das HTML-Element. nicht jedes einzelne Element. Hier ist, was ich in IE8 verwendet habe, um die SECTION-Tags zu färben.

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

Answer 3

Die Zoom-Regel soll sicherstellen, dass hasLayout ausgelöst wurde, da Ihr Anwendungsfall dies nicht benötigt, wahrscheinlich weil hasLayout bereits ausgelöst wurde.

in Bezug auf die -MS- Präfix, nach der Dokumentation von Microsoft (http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx nach unten scrollen zu „Downlevel-Support und Internet Explorer 4.0 Filter“, keine Anker Ich kann verlinken auf), IE8 zu zielen, sollte man die -MS- verwenden Präfix, um irgendetwas davor zu zielen, sollte man das ohne Präfix verwenden

Answer 4

Nur das Hinzufügen als ein Update - Ich weiß, dass das OP ihre Antwort bekam, aber ich fand diese Frage beim Versuch herauszufinden, warum es (die "Fallback ") war sogar" arbeiten "in IE7, es verwirrt mich ohne Ende so hier ist, was ich herausgefunden habe .. es funktioniert nicht richtig in IE6/7 ...

IE8 ist richtig Hier sehen Sie (mit dem Code im OP) in IE8 die Hintergrundfarbe, die durch das Farbverlaufsfilter-Overlay angezeigt wird, und da es dieselbe Farbe ist, die den Farbverlauf so aussehen lässt, als würde es nicht funktionieren und das alles, was Sie sind bekommen ist die einfarbige Farbe. Das sollte in jedem IE passieren!

IE6 & 7 sind falsch den Fehler ignoriert (so ist es nicht wirklich ein Rückfall) und haben ihre transparenten Hintergrund-Farbe aufgrund eines Fehlers, rein, weil der OP die Farben hat, die beide hex und RGBa angegeben mit background-color

Es gibt viele Möglichkeiten, dies zu umgehen .. siehe: IE Background RGB Bug - und der letzte Kommentar besonders nach Möglichkeiten - diese Abhilfe wäre wirklich nur dann anwendbar, wenn keine Filter/Steigungen mit wirklich dh mit nur RGBa (halbtransparent) Hintergründe.

Bei Verwendung von MS "Filter" Gradienten zu RGBa zu simulieren, Die MS-Filter sind stabil zurück zu IE5.5 so die Realität ist, dass sie kein Fallback benötigen und background: none; an IE nur Browser gefüttert, um den Fallback außer Kraft zu setzen für andere Browser (seltsam, huh!) ist wahrscheinlich die beste Lösung im ursprünglichen Fall - Eine Fallback-Farbe ist nur für ältere Browser-Versionen von Opera erforderlich (besonders) & Firefox, Safari et al im Falle ihrer Gradienten/rgba wird noch nicht unterstützt.

Answer 5

Es scheint, müssen Sie entweder Breite oder Höhe zu DIV CSS setzen für Gradienten in IE zu arbeiten 7+ (zumindest hatte ich)

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

this helps

Answer 6

#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 */ 
} 

Answer 7

Ich fand, dass ich das <a> Element von display:inline zu display:block ändern musste, bevor der Filterstil funktionieren würde. Die Farbe kann auch mit einer 4-Byte-Sequenz angegeben werden, wobei das erste Byte eine Opazität ist, dann rgb, d. H. #oorrggbb. Eg.

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

Answer 8

Die beste Lösung, die für IE7 und IE8 funktioniert, besteht darin, ein Farbverlaufsbild zu verwenden und repeat-x: true festzulegen, während es in den Hintergrund gestellt wird. Dies funktioniert für alle Browsertypen, die ich gefunden habe.

Answer 9

können Sie die -ms-Filter verwenden, aber ich denke, seine das gleiche Problem wie Opazität, wenn Sie filtern, bevor -ms-Filter sie versagt sich mehr an:

http://www.quirksmode.org/css/opacity.html für diese Theorie

, so dass Sie müssen wie dies zu tun:

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'); 

das funktioniert für mich

außer, dass Sie kann nicht einen 8 char hexcode haben (hex ist lateinisch für sechs) und obendrein Dies hat die gleiche Farbe zu Farbverlauf zwischen Sie müssen verschiedene Farben haben