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

回答