Balise d'ancrage positionnée de manière absolue (sans texte) non cliquable dans IE

Question

J'ai deux ancres en position absolue sur le dessus d'une image, les liens sont cliquables dans les autres navigateurs (Chrome, FF, Safari), mais pas sous IE (testé dans les 8 & 9)

La chose étrange est que si je donne le liens un background-color ils sont cliquables, mais si l' background-color est définie à l' transparent (qui est ce que je veux), ils ne sont plus cliquables, j'ai aussi essayé de réglage zoom:1 mais pas de chance. Je suppose que l' hasLayout peu dans IE s'en alla avec IE 8/9 donc deviner zoom n'a pas d'importance maintenant, pour ce genre de problème.

Toutes les idées pour rendre ces liens apparaissent dans IE 8/9 transparent bg?

Voici le violon, j'ai travaillé avec: jsFiddle exemple

J'ai la suite de la mise en page 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>

et 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;}

Answer 1

J'ai eu exactement ce problème avant et il a toujours agacé l'enfer hors de moi. Je ne suis jamais sûr de savoir pourquoi cela arrive, mais j'ai toujours de créer un 1px par 1px PNG transparent (ou GIF) et utilisez-la dans votre déclaration de fond comme:

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

Espérons que cette aide.

PS - Ne précisez pas la réelle couleur de fond avec cette. Utilisez simplement l'exemple ci-dessus, cela devrait fonctionner.

En plus de cela, essayez de votre ancre tags à afficher en tant que bloc et peut-être aussi insérer un espace insécable en eux (puisqu'ils sont vides en ce moment et qui pourrait être le déclenchement IE):

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

<a href="#">&nbsp;</a>

Answer 2

Vous pouvez le faire en utilisant le mentionné background-image astuce. Lorsque vous ne souhaitez pas utiliser une image transparente pour cela, il suffit d'utiliser un inconnu régime ou about:blank dans l'URL de l'image.

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

ou

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

Cela fonctionne au moins dans IE 8 + 9 (la seule S j'ai testé) et dans les versions actuelles de Firefox et de Chrome. Il est toujours valide CSS et ne provoque pas de trafic supplémentaire. Le premier "hack" peut donner une erreur JS dans Chrome (et peut-être d'autres) lors de l'utilisation de jquery. Le dernier seulement (mais sûrement) donne un MIME-Type d'avertissement en Chrome en raison de la mauvaise MIME-Type de l' about:blank document.

Answer 3

Transplanté à partir d'un commentaire que j'ai posté il y a quelque temps.

Peu de temps, mais toujours pas de trafic, codé en gif transparent base 64:

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

Cela a ses propres avantages / inconvénients, mais peut être utile. Également:

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

J'ai utilisé celui-ci plus récemment

Answer 4

Le commentaire de @ tw16 mentionnant invisible m'a fait penser à opacity .

Combiner les filter:alpha(opacity=0) d'IE avec background-color:#fff (ou n'importe quelle couleur) semble être une bonne solution pour cela. Testé et fonctionne dans IE 7-9 (6 n'applique pas le filtre d'opacité pour une raison quelconque mais je ne suis pas obligé de supporter 6, cela fonctionnera donc)

La solution d'image 1x1 ayant un effet global, je vais lui donner le chèque.

Merci pour les réponses.

Answer 5

J'ai eu le même problème. Ma solution de travail consistait à ajouter une bordure à l'ancre appropriée. Comme dans l'exemple suivant. Un avantage est que vous n'avez besoin d'aucune image supplémentaire.

 a { border-right: 1px solid transparent }