bezwzględnie umieszczony znacznik zakotwiczenia (bez tekstu) nie klikalny w IE

Mam dwie kotwice umieszczone bezwzględnie na obrazku, linki są klikalne w innych przeglądarkach (Chrome, FF, Safari), ale nie w IE (testowane w 8 i 9 do tej pory)

Dziwne jest to, że jeśli podam linki a background-color są one klikalne, jednak jeśli background-color jest ustawione na transparent (to jest to, co chcę ) nie są już klikalne, próbowałem również ustawić zoom:1, ale bez powodzenia. Chyba hasLayout bit w IE odszedł z IE 8/9 więc zgadywanie {[7] }nie ma teraz znaczenia dla tego typu wydania.

Jakieś pomysły, żeby te linki pokazywały się w IE 8/9 z przezroczystym bg?

Oto skrzypce, z którymi pracowałem: jsFiddle przykład

Mam następujący układ HTML: 

<div id="content">
    <img src="http://placehold.it/724x300" width="724" height="300" alt="woot" />

    <div id="countdown"></div>

    <a id="link1" href="http://www.stackoverflow.com" title="link1"></a>
    <a id="link2" href="http://www.stackoverflow.com" title="link2"></a>
</div>

I CSS: 

body {text-align:center;}
#content {position:relative; width:724px; height:300px; margin:0 auto;}

#countdown {position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;}

#link1 {position:absolute; width:520px; height:35px; bottom:20px; left:0;}
#link2 {position:absolute; width:200px; height:35px; bottom:20px; right:0;}
Author: MikeM, 2011-08-02
Source

6 answers

Miałem już taki problem i zawsze mnie to wkurzało. Nigdy nie jestem pewien, dlaczego tak się dzieje, ale zawsze tworzę 1px przez 1px transparent PNG (lub GIF) i używam tego w deklaracji tła w ten sposób: 

a { background: url("/path/to/image.png") 0 0 repeat; }
Mam nadzieję, że to pomoże.

PS-nie określaj tym żadnego rzeczywistego koloru tła. Wystarczy użyć powyższego przykładu i powinno działać.

Oprócz tego, spróbuj ustawić znaczniki kotwicy, aby wyświetlały się jako blok, a być może również wstawić niełamliwe spacje w nich (skoro w tej chwili są puste i to może potknąć IE w górę): 

a { display: block; background: url("/path/to/image.png") 0 0 repeat; }

<a href="#">&nbsp;</a>
 70
Author: Michael Giovanni Pumo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-20 11:10:28

Możesz to zrobić za pomocą wspomnianej sztuczki background-image. Jeśli nie chcesz używać przezroczystego obrazu, po prostu użyj nieznanego schematu lub about:blank w adresie URL obrazu.

a { background-image: url("iehack:///"); }

Lub 

a { background-image: url("about:blank"); }

To działa przynajmniej w IE 8 + 9 (jedyny IEs, który testowałem) oraz w aktualnych wersjach Firefoksa i Chrome. Nadal jest poprawny CSS i nie powoduje dodatkowego ruchu. Pierwszy "hack" może dać błąd JS w Chrome (i może innych) podczas korzystania z jquery. Ten ostatni tylko (ale na pewno) daje typ MIME ostrzeżenie w Chrome z powodu niewłaściwego typu MIME dokumentu about:blank.

 53
Author: Dio F,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-11 19:17:46

Przeszczepiony z komentarza, który zamieściłem jakiś czas temu.

Trochę dłużej, ale nadal bez ruchu, base 64 zakodowany przezroczysty gif: 

background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICR‌​AEAOw==')

To ma swoje plusy/minusy, ale może być przydatne. Także: 

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

Używałem tego Ostatnio

 24
Author: morewry,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-11 06:15:03

@tw16 ' s comment of invisible got me thinking about opacity.

Połączenie IE filter:alpha(opacity=0) z background-color:#fff (lub dowolnym kolorem) wydaje się być dobrym rozwiązaniem. Testowane i działa w IE 7-9 (6 nie stosuje filtra nieprzezroczystości z jakiegoś powodu, ale nie jestem zobowiązany do obsługi 6, więc to będzie działać)

Rozwiązanie obrazu 1x1 jest efekt globalny, więc zamierzam dać mu czek.

Dzięki za odpowiedzi.
 10
Author: MikeM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-01 21:02:33

Miałem ten sam problem. Moim rozwiązaniem było dodanie obramowania do odpowiedniej kotwicy. Jak w poniższym przykładzie. Jedną z zalet jest to, że nie potrzebujesz dodatkowego obrazu.

a { border-right: 1px solid transparent }
 3
Author: Jim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-24 08:33:22

IE ma paskudny nawyk, aby linki nie działały zgodnie z oczekiwaniami, gdy nie mają żadnej treści. Aby to naprawić, daj każdemu linkowi &nbsp; dla treści.

Kolejną rzeczą do spróbowania jest ustawienie display: block; na linkach, aby IE przepływało je jako elementy blokowe, a nie jako elementy liniowe. Może to również pomóc w tym, że linki muszą być puste.

 2
Author: cdeszaq,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-02 15:57:14