web-dev-qa-db-fra.com

balise d'ancrage positionnée absolue (sans texte) non cliquable dans IE

J'ai deux ancres positionnées de manière absolue au-dessus d'une image, les liens sont cliquables dans d'autres navigateurs (Chrome, FF, Safari) mais pas dans IE (testé en 8 et 9 jusqu'à présent)

Ce qui est étrange, c'est que si je donne aux liens un background-color ils sont cliquables, cependant si le background-color est réglé sur transparent ( ce que je veux ) ils ne sont plus cliquables, j'ai également essayé de définir zoom:1 mais pas de chance. Je suppose que le bit hasLayout dans IE est parti avec IE 8/9 donc deviner zoom n'a plus d'importance maintenant) pour ce genre de problème.

Des idées pour faire apparaître ces liens dans IE 8/9 avec un bg transparent?

Voici le violon avec lequel je travaille: exemple jsFiddle

J'ai la mise en page HTML suivante:

<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;}
htmlcssinternet-explorercss-position
70
MikeM

J'ai déjà eu ce problème auparavant et cela m'a toujours énervé. Je ne sais jamais pourquoi cela se produit, mais je crée toujours un PNG transparent (ou GIF) 1px par 1px et j'utilise cela dans votre déclaration d'arrière-plan comme ceci:

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

J'espère que cela t'aides.

PS - Ne spécifiez aucune couleur d'arrière-plan réelle avec cela. Utilisez simplement l'exemple ci-dessus et cela devrait fonctionner.

En plus de cela, essayez de définir vos balises d'ancrage pour qu'elles s'affichent sous forme de bloc et peut-être également d'y insérer un espace insécable (car elles sont vides pour le moment et cela pourrait être déclenché IE up ):

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

<a href="#">&nbsp;</a>
70
Michael Giovanni Pumo

Vous pouvez le faire en utilisant le background-image tour. Lorsque vous ne souhaitez pas utiliser une image transparente pour cela, utilisez simplement un schéma inconnu 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 (les seuls IE que j'ai testés) et dans les versions actuelles de Firefox et Chrome. Il est toujours valide CSS et ne cause aucun trafic supplémentaire. Le premier "hack" peut donner une erreur JS dans Chrome (et peut-être d'autres) lors de l'utilisation de jquery. Ce dernier uniquement (mais sûrement) donne un avertissement de type MIME dans Chrome due au mauvais type MIME du about:blank document.

53
Dio F

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

Peu plus long, mais toujours pas de trafic, gif transparent encodé en 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

24
morewry

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

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

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

Merci pour les réponses.

10
MikeM

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

a { border-right: 1px solid transparent }
3
Jim

IE a la mauvaise habitude de ne pas faire fonctionner les liens comme prévu lorsqu'ils n'ont pas de contenu. Pour résoudre ce problème, attribuez à chaque lien un &nbsp; pour le contenu.

Une autre chose à essayer est de définir display: block; sur les liens pour faire IE les faire circuler en tant qu'éléments au niveau du bloc plutôt qu'en tant qu'éléments en ligne. Cela peut également aider si vous avez besoin que les liens soient vides.

2
cdeszaq