Absolut positioniertes Ankertag (ohne Text) im IE nicht anklickbar

70

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;}
MikeM
quelle
Ihre Links sind unsichtbar, es sei denn, Sie suchen nach ihnen. Werden sie keinen Text enthalten oder so?
Tw16
Ich bin auch schon einmal auf dieses Problem gestoßen. Versuchen Sie, die Lösung von @ Michael zu verwenden. Nur so konnte ich es erreichen / umgehen.
Brenjt
@ tw16 Die Links befinden sich über anklickbar aussehenden Inhalten in dem Bild, auf dem sie sich befinden, kein Text in den Links selbst (im Grunde eine
Imagemap
1
Sie können das wie hier in css base64 codieren: proger.i-forge.net/The_smallest_transparent_pixel/eBQ
Jacek Pietal

Antworten:

70

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>
Michael Giovanni Pumo
quelle
Ich würde es vermeiden, einen zusätzlichen Serveraufruf zu tätigen, um das Image zu erhalten, da jeder Serveraufruf einen großen Einfluss auf die Antwortzeit der Seite (und auch auf die Serverlast!)
Hat
1x1 Bild ist eine gute Idee, hatte ein bisschen auf eine einfachere CSS-Lösung gehofft, das 1x1 scheint 90er Jahre Stil Webdesign :) Danke für den Vorschlag.
MikeM
1
Das Erschwerende an der 1x1-Bildlösung (und anderen "90s Style Web Design" -Techniken, danke, dass Sie mich zum Lachen gebracht haben :)) ist, dass sie wirklich ... zuverlässig sind. Wie in, sie sind unerträglich zu implementieren, aber sie funktionieren einfach und normalerweise in allen Browsern. Es ist keine Schande, dies zu tun, und wenn Sie nicht mit einer sehr großen Menge an Verkehr zu tun haben, wird Ihnen die zusätzliche Anfrage nicht schaden.
Winfield Trail
3
@ Michael das display:blockund &nbsp;ist nicht effektiv, aber das bkgd 1x1 ist, thx
MikeM
52
Wenn Sie kein Bild verwenden möchten, können Sie eine Base64-codierte Zeichenfolge verwenden. Dies funktioniert sowohl in IE7 als auch in IE8. Hintergrund: URL ("Daten: Bild / GIF; Base64, R0lGODlhAQABAIAAAAAAAP /// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 Wiederholung;
Eddie
53

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.

Dio F.
quelle
2
Ich bevorzuge diese Lösung wirklich, weil sie keinen Datenverkehr erzeugt und wenn es um Browserkompatibilität und komplexe Projekte geht, müssen Sie immer ein paar Warnungen in der Konsole tragen. Vielen Dank!
SamiSalami
29
Etwas länger, aber immer noch kein Verkehr, Base 64-codiertes transparentes GIF: background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')... vollständig gültig.
Morewry
@morewry Ich denke wirklich, du solltest es als Antwort posten. ;-)
Kos
@ Kos Wow, 21 Stimmen. Ich denke ich sollte. Und jetzt habe ich und die Lösung, die ich zuletzt verwendet habe und die meiner Meinung nach noch nicht hier veröffentlicht wurde.
Morgen
Hack, damit es nur auf IE6-8 funktioniert: Hintergrundbild: URL ("about: blank") \ 9;
Mjlescano
24

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

mehr
quelle
Ich mag "Hintergrundfarbe: rgba (0,0,0,0)" - es ist am einfachsten und am wenigsten hackig!
Sergey Povalyaev
10

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.

MikeM
quelle
2
Die einzige Gefahr dabei ist, dass Sie auf Probleme mit anderen Browsern stoßen, die den Hintergrund nicht undurchsichtig machen. Um dies zu vermeiden, habe ich gerade "Deckkraft: 0;" zusätzlich zu dem, was du getan hast, so dass es auf der ganzen Linie funktionierte. IE9 verwendete "Opazität" sowie Chrom und Firefox und IE7 / 8 verwendete "Filter". Bearbeiten : Diese Antwort hat mir gefallen, weil sie einen zusätzlichen Anruf beim Server vermeidet. Dies bedeutet zwar nicht viel für die Leistung meiner Server, kann jedoch die Leistung auf der Client-Site beschleunigen, wenn eine langsame Verbindung zum Internet besteht.
CrowderSoup
@CrowderSoup Für meine Situation hatte ich kein Problem mit anderen Browsern (FF, Chrome, Safari), da das CSS in meiner Frage auf diesen funktionierte. Das einzige Problem war im IE, und daher habe ich nur verwendet filter:alpha(...). Ja, ich stimme einer weniger Hin- und Rückfahrt zum Server zu :)
MikeM
3

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 }
Jim
quelle
2

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 &nbsp;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.

cdeszaq
quelle
2
&nbsp;und display:blockgibt nur einen sehr kleinen klickbaren Teil (für den Raum), die Breite / Höhe wird immer noch bis zum
klickbaren