Chrome/Safari中導致溢出的相對元素中的絕對定位元素

我們試圖解決的問題是文本溢出超過<p>的末尾。它似乎是其內容的結果，其中包括一個相對位置爲<a>的元素，其中包含絕對定位的<span>元素，該元素具有填充。 Firefox會按照我通常所期望的那樣包裝文本。Chrome/Safari中導致溢出的相對元素中的絕對定位元素

這裏是我的HTML的抽象：

<p> 
    In this second example, 
    <a href="#"> 
     <span class="icon"><img src="play.gif"></span> 
     mo 
    </a> 
    muh... 
</p>

而且CSS的抽象，如簡化，因爲我覺得還是有道理：

a { 
    padding: 5px; 
} 
a span.icon { 
    position: absolute; 
    display: block; 
    width: 15px; 
    height: 15px; 
}

這裏的問題的屏幕截圖（高亮是Chrome的元素檢查器，突出顯示了<p>元素）。你可以看到詞immediately在<p>結束溢出：

任何指針所理解的正確的方向。

2013-01-11 eoinoc

爲什麼要使用絕對定位？你應該可以使用'display：inline'或者設置鏈接的'background-image'和一些填充來做到這一點。 –

是的，使用'display：inline'（實際上，'display：inline-block'可以設置寬度）這個解決了。通過刪除'display：block'，Chrome正確地包裝。如果你想讓我接受作爲答案，請注意添加一個問題？ – eoinoc

當然。幫助有類似問題的人是很好的。我會盡快爲你起草一個答案:) –

而不是使用絕對定位，嘗試使用display:inline或display:inline-block（如果您需要設置高度/寬度 - 注意：不支持IE 7及更低版本）。

您可以將display放在一起，因爲圖像和跨度是以內聯方式開始的。我有一個example在這裏刪除跨度，只是形象的圖像和周圍的鏈接。

您也可以使用圖像作爲按鈕的背景，並將填充設置爲佔空間。例如：

.button{ 
    background: url(img/buttonIcon.png) no-repeat; /* 15x15 icon */ 
    padding: 0 0 0 15px; 
}

2013-01-14 16:28:16

回答