Masquer le texte d'un lien avec span

Bonjour

J'ai créé une barre de menu à partir d'une liste.

  	<ul>
	<li id="accueil"><a href="#"><span>Accueil</span></a></li>
	<li id="presentation"><a href="#"><span>Pr&eacute;sentation</span></a></li>
	<li id="expositions"><a href="#">Expositions</a></li>
	<li id="peintures"><a href="#">Peintures</a></li>
	<li id="dessins"><a href="#">Dessins</a></li>
	<li id="interview"><a href="#">Interview</a></li>
	<li id="contact"><a href="#">Contact</a></li>
	<li id="liens"><a href="#">Liens</a></li>
	</ul>

J'ai appliqué un style à la balise span pour masquer le contenu des liens, ne souhaitant voir que l'image d'arrière-plan :

ul li a span, ul li a:hover span {
	display: none;
}

Cela fonctionne parfaitement sous Firefox mais comme d'habitude, cela ne fonctionne pas sous IE : Les liens voient leur hauteur augmenter et ne font pas la taille indiquée dans la css :

ul li a {
	display: block;
	width: 140px;
	height: 25px;
	margin: 0;
	padding: 0;
}

La solution serait simplement d'insérer une balise <a> vide mais le problème est que mon lien sera inexistant dans les navigateurs non-graphiques.
Merci pour vos suggestions...