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;}
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="#"> </a>
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
.
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///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')
To ma swoje plusy/minusy, ale może być przydatne. Także:
background-color: rgba(0,0,0,0)
Używałem tego Ostatnio
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.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 }
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
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.
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