Ich habe zwei Anker, die absolut über einem Bild positioniert sind. Die Links können in anderen Browsern (Chrome, FF, Safari) angeklickt werden, aber nicht im IE (bisher in 8 und 9 getestet).
Das Seltsame ist, wenn ich den Links ein gebe, dass background-color
sie anklickbar sind. Wenn sie jedoch background-color
auf transparent
( was ich will ) eingestellt sind, sind sie nicht mehr anklickbar. Ich habe auch versucht, sie einzustellen, zoom:1
aber kein Glück. Ich denke, das hasLayout
Bit im IE ist mit IE 8/9 verschwunden, daher spielt das Erraten zoom
jetzt für diese Art von Problem keine Rolle.
Irgendwelche Ideen, um diese Links in IE 8/9 mit einem transparenten Hintergrund anzuzeigen?
Hier ist die Geige, mit der ich gearbeitet habe: jsFiddle-Beispiel
Ich habe das folgende HTML-Layout:
<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>
und 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;}
Antworten:
Ich hatte genau dieses Problem schon einmal und es hat mich immer verdammt geärgert. Ich bin mir nie sicher, warum es passiert, aber ich erstelle immer ein transparentes PNG (oder GIF) von 1 x 1 Pixel und verwende das in Ihrer Hintergrunddeklaration wie folgt:
a { background: url("/path/to/image.png") 0 0 repeat; }
Hoffe das hilft.
PS - Geben Sie hier keine tatsächliche Hintergrundfarbe an. Verwenden Sie einfach das obige Beispiel und es sollte funktionieren.
Versuchen Sie außerdem, Ihre Ankertags so einzustellen, dass sie als Block angezeigt werden, und fügen Sie möglicherweise auch ein nicht unterbrechendes Leerzeichen in sie ein (da sie derzeit leer sind und möglicherweise den IE auslösen):
a { display: block; background: url("/path/to/image.png") 0 0 repeat; } <a href="#"> </a>
quelle
display:block
und
ist nicht effektiv, aber das bkgd 1x1 ist, thxSie können es mit dem genannten
background-image
Trick tun . Wenn Sie hierfür kein transparentes Bild verwenden möchten, verwenden Sie einfach ein unbekanntes Schema oderabout:blank
die Bild-URL.a { background-image: url("iehack:///"); }
oder
a { background-image: url("about:blank"); }
Dies funktioniert zumindest in IE 8 + 9 (den einzigen von mir getesteten IEs) und in aktuellen Versionen von Firefox und Chrome. Es ist weiterhin gültiges CSS und verursacht keinen zusätzlichen Datenverkehr. Der erste "Hack" kann bei Verwendung von jquery einen JS-Fehler in Chrome (und möglicherweise auch in anderen) verursachen. Letzteres gibt nur (aber sicher) eine Warnung zum MIME-Typ in Chrome aufgrund des falschen MIME-Typs des
about:blank
Dokuments aus.quelle
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')
... vollständig gültig.Transplantiert von einem Kommentar, den ich vor einiger Zeit gepostet habe.
Etwas länger, aber immer noch kein Verkehr, Base 64-codiertes transparentes GIF:
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')
Dies hat seine eigenen Vor- und Nachteile, kann aber nützlich sein. Ebenfalls:
background-color: rgba(0,0,0,0)
Ich habe dieses vor kurzem verwendet
quelle
Der Kommentar von @ tw16
invisible
hat mich zum Nachdenken gebrachtopacity
.Die Kombination von IE's
filter:alpha(opacity=0)
mitbackground-color:#fff
(oder einer beliebigen Farbe) scheint hierfür eine gute Lösung zu sein. Getestet und funktioniert in IE 7-9 (6 wendet den Opazitätsfilter aus irgendeinem Grund nicht an, aber ich muss 6 nicht unterstützen, damit dies funktioniert)Die 1x1-Bildlösung ist global wirksam, daher werde ich ihm den Scheck geben.
Danke für die Antworten.
quelle
filter:alpha(...)
. Ja, ich stimme einer weniger Hin- und Rückfahrt zum Server zu :)Ich hatte das gleiche Problem. Meine Arbeitslösung bestand darin, dem entsprechenden Anker einen Rand hinzuzufügen. Wie das folgende Beispiel. Ein Vorteil ist, dass Sie kein zusätzliches Bild benötigen.
a { border-right: 1px solid transparent }
quelle
IE hat die böse Angewohnheit, dass Links nicht wie erwartet funktionieren, wenn sie keinen Inhalt haben. Um dies zu beheben, geben Sie jedem Link einen
for-Inhalt.Sie können auch versuchen,
display: block;
die Links so festzulegen, dass der IE sie als Elemente auf Blockebene und nicht als Inline-Elemente fließen lässt. Dies kann auch hilfreich sein, wenn die Links leer sein müssen.quelle
unddisplay:block
gibt nur einen sehr kleinen klickbaren Teil (für den Raum), die Breite / Höhe wird immer noch bis zum