IE CSS Fehler: Hintergrundfarbe: transparent verhält sich anders als Hintergrundfarbe: (jede andere Farbe)

Question

Ich habe mich bemüht herauszufinden, warum sich dieser Rollover im IE8 nicht so verhält, wie er sollte.

Gehen Sie hier: http://baked-beans.tv in IE8, werden Sie sehen, dass der Rollover nur auf der unteren Hälfte der Thumbnails funktioniert.

Btw, dies wird nicht von einem <a>-Tag, sondern von einem :hover für die <div> aktiviert.

Was ich kann nicht herausfinden, warum es nur die untere Hälfte des div arbeitet an, unter dem Bild, aber nicht auf dem Bild (das Bild ist nicht z-indiziert thats, so nicht das Problem)

Sobald ich die background-color zu etwas anderem außer transparentem ändern, funktioniert es 100%. Das bläst mich nur ... warum die untere Hälfte, aber nicht die obere Hälfte, und nur wenn ich bg-color auf transparent setze ?! Ich muss den Internet Explorer lieben.

Dies funktioniert, wie es auf jedem anderen Browser (der gesamte Platz fungiert als Rollover)

Hier sollte die CSS:

.cat_rollout { 
    position: absolute; 
    float:left; 
    top:0; 
    left:0; 
    min-height:274px; 
    min-width:274px; 
    font-size: 0; 
    background-color: transparent; 
} 

.cat_rollout:hover { 
    background-image: url(images/rollover.png); 
    min-width:254px; 
    min-height:242px; 
    padding-left: 20px; 
    color: white; 
    font-size: 21px; 
    font-weight: normal; 
    line-height: 24px; 
    padding-top: 34px; 
} 

Answer 1

Versuchen Sie, ein Hintergrundbild vorzutäuschen oder es auf ein blank.gif anstatt zu setzen, um es transparent zu machen.

background:url(blank.gif); 

Siehe http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/

Answer 2

Sie auch den Hover-Selektor zu ändern, um versuchen könnte:

.thumb_container:hover .cat_rollout {...} 

so dass das Eltern-Containment-div das Element ist, das auf den Hover reagiert.

Answer 3

Das Problem ist, dass seit einiger Zeit (eine Woche? 2 Wochen?), Dh die Art und Weise verändert hat es Hintergrund-Farbe interpretiert. Es scheint, dass man nicht sagen kann, dass die Farbe transparent ist, eher der ganze Hintergrund. Sie sollten also background-color: transparent in background: transparent ändern. Sehr böse.

Answer 4

Sie können ein 1x1 transparentes gif als Datavi verwenden, wenn Sie möchten.

background-image:url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==); 

Bis zu Ihnen welche Sie bevorzugen würden, dies funktioniert und ist eine Alternative zu der ausgewählten Antwort.

Answer 5

Das gleiche Problem wurde beobachtet, bei dem das Schweben auf dem leeren Bereich eines transparenten Elements keine Auswirkungen auf css-Regeln hat, die sich auf beziehen. Das Problem wird behoben, indem dem Element der folgende Stil zugewiesen wird.

background-color: rgba(0, 0, 0, 0.001);