html - 文本缩进在 chrome 和 firefox 中定义了不同的 div 大小

Question

我在这里有这个小块 - 文本有文本缩进所以它不会被看到，然后唯一应该看到的是图像的跨度（大小 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;
}

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