IE nie przestrzegając: hover na elemencie

pracę na następującej stronie internetowej: http://cetcolor.com IE nie przestrzegając: hover na elemencie

graficzny topu z „przeczytać o tym” przycisk posiada umieszczony związek z zawisu, że gdy przewrócił wyświetla grafikę pomarańczowy przycisk i jest klikalny link.

Jednak w przeglądarkach IE to nie działa.

Oto HTML dotknięty:

<div id="header"> 
    <a href="/" title="CET Color"><img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"></a> 
    <span class="strapline">Affordable Large-format UV Printing Solutions</span> 
    <a href="/pressroom_article8" class="read_about_it"></a>  
</div>

A oto odwoływać CSS:

#header .read_about_it { 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 
#header .read_about_it:hover { 
    background-image: url(/images/masthead_index_read_about_i.jpg); 
    background-repeat: no-repeat; 
    cursor: pointer; 
    z-index: 101; 
}

Czy ktoś ma jakiś pomysł, dlaczego aktywowania nie działa w przeglądarkach IE?

Źródło

2012-03-22 Yazmin

Jedną z przyczyn może być brak pustego łącza. Spróbuj wstawić jakiś tekst i wykonaj "text-indent: -9999px", aby go przenieść. – easwee

Myślę, że masz rację, że problem dotyczy pustego łącza. Kiedy dodaję treść do linku, działa. Kiedy dodaję tekstowe wcięcie do pierwszej deklaracji powyżej, przestaje działać. Nie jestem pewien, co z tym zrobić ... – Yazmin

Mam dla ciebie rozwiązanie. Po prostu zdefiniuj kolor tła lub obraz tła dla swojej klasy read_about_it.

Istnieje oczywisty błąd logiczny w kodzie CSS/lub w IE - w zależności od punktu widzenia. Twój znacznik A jest pusty - nie mam na myśli tekstu, ale tło (zmieniasz tło w swoim stanie). Wszyscy wiemy, że IE żyje w swoim własnym świecie i obsługuje HTML w inny sposób, ponieważ używa on starożytnego silnika Trident. Jednak IE nie zmieni tła w stanie aktywacji, jeśli element jest pusty (nie ma tła), ponieważ IE zakłada, że nie ma potrzeby zmiany lub tworzenia czegoś, co jeszcze nie istnieje.
Pozdrawiam!

Źródło

2012-03-22 16:35:57

Udało mi się to zrobić, dodając przezroczysty gif na tle. Dziękuję bardzo. – Yazmin

Nie ma za co! Dobrym pomysłem jest użycie gifa transperantowego. –

Jeśli używasz IE6 nie obsługuje: hover na żadnych elementów z wyjątkiem

<a>

Dostałem wokół niego za pomocą JavaScript

onmouseover 
onmouseout

wydarzenia.

Źródło

2012-03-22 16:10:13

Nieprawda. IE obsługuje ': hover' na wszystkich elementach. IE6 nie obsługuje ': hover' na żadnym elemencie poza znacznikiem' '. Wszystkie wersje wyższe niż obsługa IE6: ładnie się ładują. – easwee

Dzięki easwee za wyjaśnienie. Zaktualizowałem moje brzmienie. –

Dodać "display: block;" do tego, i to powinno działać dla ciebie.

#header .read_about_it { 
    display: block; 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
}

Źródło

2012-03-22 16:11:31

Próbowałem tego, ale to nie zadziałało. Czy ten tryb jest specyficzny - standardowy, luźny? – Yazmin

"display: inline-block;" pracował również - dzięki. – buffjape

mam ten sam problem i mam rozwiązać ten problem:

#header .read_about_it { 
    display: block; 
    background: rgba(255, 255, 255, 0); 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
}

"w tle: RGBA (255, 255, 255, 0)" jest słowem kluczowym, aby rozwiązać ten problem. Ale chcesz IE-7 LUB starszy możesz umieścić obraz tła: adres URL (URL_TO_TRANSPARENT_IMAGE).

Źródło

2013-06-05 14:25:10

IE nie przestrzegając: hover na elemencie

Odpowiedz

Powiązane problemy