0

私はここにこの小さな部分を持っています-テキストにはテキストインデントがあるので、それは表示されません、そして表示されるべきものは画像のスパン（サイズ24 * 27）だけです。Firefoxは<a>（私が望んでいたように）24 * 27のサイズであると認識しますが、chromeはそれを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;
}
4

1 に答える 1

0

私は@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;
}
于 2011-11-30T11:25:55.670 に答える