テキストインデントは、ChromeとFirefoxの異なるDivサイズを定義します

Question

私はここにこの小さな作品を持っています - テキストにはテキストがインデントされているので、見られないので、見られるべきものだけが画像のスパンです（サイズ24*27）。 Firefoxはを見ます <a> 24*27のサイズ（私が望んでいたとおり）が58*24（はるかに広い）に計算されます。テキスト自体を出すと問題が解決します（ただし、そこにテキストを残したいと思います）。

テキストに追加すると display:none プロパティはうまく機能しますが、私はそれをしたくありません。

間違いは何ですか？なぜそれが異なって計算され、どうすればそれを解決するのですか？

私はこのhtmlの一部を持っています：

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

一般的なCSSは次のとおりです。

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

私は@ptreikに同意します - それはの使用です display: block それはあなたの問題を引き起こしています。

CSSを次のように変更できれば機能します。

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