tiret texte définit la taille différente div en chrome et firefox

Question

J'ai ce petit morceau ici - le texte a text-indent Il ne sera pas visible et seule chose qui devrait être vu est la portée de l'image (taille 24 * 27). Firefox voit le <a> dans la taille de 24 * 27 (comme je voulais) mais chrome calcule à 58 * 24 (beaucoup plus large). Obtenir le texte lui-même à résoudre le problème (mais je veux laisser le texte là-bas).

Quand j'ajoute au texte la propriété display:none il fonctionne bien, mais je veux pas le faire.

Quelle est l'erreur? Pourquoi faut-il calculer différemment et comment puis-je résoudre?

J'ai ce morceau de code HTML:

<li class="hideText"> 
   <a id="create" href="#">
       <span class="img"></span>
       <span class="text">Create</span>
    </a>
</li>

CSS général est:

a{
    display: block;
    height: 24px;
 }

span.img {
    background: none repeat scroll 0 0 red;
    display: block;
    float: left;
    height: 24px;
    width: 27px;
}

#main #sidebar #createNavigation ul li.hideText span.text {
    display: block;
    text-indent: -9999px;
}

Answer 1

Je suis d'accord avec @ptreik - il est l'utilisation de display: block qui est la cause de vos problèmes

.

Vous pouvez modifier votre CSS à ce qui suit et il fonctionnera:

a{
    /* display: block;   remove this */
    height: 24px;
}

span.img {
    background: none repeat scroll 0 0 red;
    /* display: block;   remove this as `float: left` does this for you */ 
    float: left;
    height: 24px;
    width: 27px;
}

#main #sidebar #createNavigation ul li.hideText span.text {
    /* display: block;   remove this */
    float: left;    /* add this */
    text-indent: -9999px;
}