文本缩进定义了铬和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;
}