CSS Sprites - code fonctionne dans Chrome, échoue dans FF et IE ... pourquoi?

Question

J'utilise des sprites pour contrôler deux éléments de navigation graphique. Le CSS que j'ai écrit fonctionne parfaitement dans Chrome, mais échoue dans FF et IE.

Le CSS est:

a.gallery-left{ 
margin-top: 5px; 
background: url('arrows_sprited.png') 0 0px; 
width: 45px; 
height: 34px; 
overflow: hidden; 
float: left; 
} 

a.gallery-left:hover { 
background: url('arrows_sprited.png') -46 0px; 
cursor: pointer; 
zoom: 1; 
} 

a.gallery-right{ 
margin-top: 5px; 
background: url('arrows_sprited.png') -133 0px; 
width: 46px; 
height: 34px; 
overflow: hidden; 
float: right; 
} 

a.gallery-right:hover { 
background: url('arrows_sprited.png') -89 0px; 
cursor: pointer; 
zoom: 1; 
} 

dans le document invoqué html par ceci:

<a class="gallery-left"></a> 
    <a class="gallery-right"></a> 

Pourquoi est-il en FF parviennent pas? Lorsque j'examine l'élément avec Firebug, le second n'est pas visible (mais il est dans la première. Très étrange.

des idées? merci beaucoup!

Answer 1

ajouter le px après les valeurs de décalage.

background: url('arrows_sprited.png') 0px 0px; 
background: url('arrows_sprited.png') -46px 0px; 
background: url('arrows_sprited.png') -133px 0px; 
background: url('arrows_sprited.png') -89px 0px; 

dans le premier cela a fonctionné parce que la valeur est 0, ce qui est universel dans tous les types d'unités.

Answer 2

éléments en ligne ne respectent pas les valeurs largeur ou hauteur. Ils auront exactement le WIDT h et hauteur qui correspond à tout texte qu'ils contiennent, dans ce cas une chaîne vide.

Modifiez le <a> en <div> ou rendez-le display: block.