Absolut positioniertes Ankertag (ohne Text) im IE nicht anklickbar

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-colorsie anklickbar sind. Wenn sie jedoch background-colorauf transparent( was ich will ) eingestellt sind, sind sie nicht mehr anklickbar. Ich habe auch versucht, sie einzustellen, zoom:1aber kein Glück. Ich denke, das hasLayoutBit im IE ist mit IE 8/9 verschwunden, daher spielt das Erraten zoomjetzt 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;}

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="#">&nbsp;</a>

Sie können es mit dem genannten background-imageTrick tun . Wenn Sie hierfür kein transparentes Bild verwenden möchten, verwenden Sie einfach ein unbekanntes Schema oder about:blankdie 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:blankDokuments aus.

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///wAAACH5BAEAAAAALAAAAAABAAEAAAICR‌​AEAOw==')

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

Der Kommentar von @ tw16 invisiblehat mich zum Nachdenken gebracht opacity.

Die Kombination von IE's filter:alpha(opacity=0)mit background-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.

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 }

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.