2010-10-17 4 views
1

essayant actuellement de créer la meilleure ancre avec l'image de fond, le vol stationnaire et les étapes actives. Voici ce que j'ai pour ce moment. Cela fonctionne bien dans tous les navigateurs sauf dans IE si j'appuie sur span (15px left side fonctionne bien car c'est l'ancre). Voici l'exemple link text. Des idées? Je veux garder le code actuel, pas d'absolu, pas de javascript. Je peux ajouter une propriété CSS en tant que span: active ou focus, mais cela ne permet pas de changer la position de l'ancre en arrière-plan.IE hover/focus/ancre active et span, aucun javascript

Voici le code HTML:

<a href="#" title="Lorem ipsum noster"><span>Lorem ipsum noster</span></a> 

Voici le code CSS:

a {float: left; padding-left: 15px; background: url(i.png) no-repeat -285px 0; text-decoration: none; color: grey; cursor: pointer; overflow: hidden} 
a span {float: left; height: 24px; line-height: 22px; padding-right: 30px; white-space: nowrap; background: url(i.png) no-repeat 100% 0; margin-right: -15px;} 
a:hover {color: black} 
a:active, a:focus {background-position: -285px 1px; color: red;} 
a:active span, a:focus span {background-position: 100% 1px; color: red; line-height: 24px;} 

permet de voir ce que vous savez :)

Répondre

0

Il semble IE ne comprend pas les règles pour les enfants de un élément avec :active. Cependant, vous pouvez appliquer cette pseudo-classe à <span> qui fonctionne sur IE> 7.

Je cherche un problème pour IE 8 < ^^