文本縮進在Chrome和Firefox中定義了不同的div大小

我在這裏有這個小塊 - 文本有文本縮進所以它不會被看到，然後只有應該看到的東西是圖像的跨度（大小爲24 * 27）。 Firefox看到的尺寸爲24 * 27的<a>（正如我想要的），但是Chrome會將其計算爲58 * 24（更寬）。獲取文本本身解決了問題（但我想將文本留在那裏）。文本縮進在Chrome和Firefox中定義了不同的div大小

當我添加到文本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; 
}

來源

2011-11-30 Alon

你有CSS復位風格樣式表？ – Samich

是的，我有一個 – Alon

你的代碼對我來說看起來有點奇怪，你能解釋一下你到底想達到什麼嗎？另外 - 如果你在a和span.text上都放置display：block，它們只會繼承它們父元素的寬度... – ptriek

我同意@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-30 11:25:55

文本縮進在Chrome和Firefox中定義了不同的div大小

回答

相關問題