trattino Testo definisce il formato differente div in Chrome e Firefox

Question

ho questo piccolo pezzo qui - il testo ha text-indent Così non sarà visto e quindi unica cosa che dovrebbe essere visto è l'arco con l'immagine (dimensioni 24 * 27). Firefox vede il <a> nelle dimensioni di 24 * 27 (come avrei voluto) Ma Chrome calcola a 58 * 24 (molto più ampio). Ottenere il testo stesso fuori risolve il problema (ma voglio lasciare il testo lì).

Quando aggiungo al testo della proprietà display:none allora funziona bene ma non vuole farlo.

Qual è l'errore? Perché si calcola in modo diverso e come posso risolverlo?

ho questo pezzo di codice HTML:

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

CSS generale è:

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

Sono d'accordo con @ptreik - è l'uso di display: block che sta causando i problemi

.

È possibile modificare il CSS al seguente e funzionerà:

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;
}