Ich hatte Mühe herauszufinden, warum sich dieser Rollover im IE8 nicht so verhält, wie er sollte.

Gehe hier hin:http: //baked-beans.t In IE8 sehen Sie, dass der Rollover nur in der unteren Hälfte der Thumbnails funktioniert.

Btw, dies wird nicht durch ein @ aktivie<a> tag aber durch ein:hover für das<div>.

Was ich nicht herausfinden kann, ist, warum es nur auf der unteren Hälfte des Div funktioniert, unter dem Bild, aber nicht auf dem Bild (das Bild ist nicht z-indiziert, so dass das nicht das Problem ist)

Sobald ich das @ ändebackground-color für alles andere außer transparent funktioniert es zu 100%. Das macht mich wahnsinnig ... warum die untere Hälfte, aber nicht die obere Hälfte, und nur, wenn ich bg-color auf transparent stelle ?! Ich muss den Internet Explorer lieben.

Dies funktioniert in jedem anderen Browser so wie es sollte (das gesamte Quadrat fungiert als Rollover)

Hier ist das 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;
}