IE CSS Błąd: background-color: transparent zachowuje się inaczej niż background-color: (dowolny inny kolor)

Question

Starałem się dowiedzieć, dlaczego ta rollover nie zachowuje się tak jak powinna w IE8.

Przejdź tutaj: http://baked-beans.tv w IE8 zobaczysz, że rollover działa tylko w dolnej połowie miniaturek.

Btw, to nie jest aktywowane przez znacznik <a>, ale przez :hover dla <div>.

Co nie mogę dowiedzieć się, dlaczego to działa tylko na dolną połowę div, pod obrazem, ale nie na obrazie (obraz nie jest z indeksowane więc to nie problem)

Gdy tylko zmienię background-color na wszystko inne oprócz przezroczystego, działa on w 100%. Więc to po prostu dmucha w moim umyśle ... dlaczego w dolnej połowie, ale nie w górnej połowie, i tylko kiedy ustawiam kolor bg na przezroczysty ?! Uwielbiam Internet Explorera.

To działa jak należy na każdej innej przeglądarce (cały aktów kwadratowych jak rollover)

Oto 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

Spróbuj sfałszować obraz tła lub ustawić go jako pusty.gif zamiast tego uczynić go przezroczystym.

background:url(blank.gif); 

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

Answer 2

Można również spróbować zmienić selektor najechania na:

.thumb_container:hover .cat_rollout {...} 

tak, aby div separujący dla elementu nadrzędnego był elementem reagującym na wskaźnik.

Answer 3

Problem polega na tym, że przez jakiś czas (tydzień? Dwa tygodnie?), Czyli zmienił sposób, w jaki interpretuje background-color. Wydaje się, że nie można powiedzieć, że kolor jest przezroczysty, a raczej całe tło. Więc powinieneś zmienić background-color: transparent w background: transparent. Bardzo paskudny.

Answer 4

Możesz użyć przezroczystego gif 1x1 jako datauri, jeśli wolisz.

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

Do Ciebie, który z nich chcesz, to działa i jest alternatywą dla wybranej odpowiedzi.

Answer 5

Ten sam problem został zaobserwowany, gdy najechanie na pusty obszar elementu przezroczystego nie powoduje, że reguły CSS związane z efektami są powiązane z hover. Problem został rozwiązany poprzez nadanie elementowi następującego stylu.

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