绝对定位的元素在一个相对的元素中导致Chrome / Safari中的溢出

Question

我们试图解决的问题是文本溢出<p>的末尾。它似乎是其内容的结果，其中包含相对位置<a>元素，其中包含绝对定位的<span>元素，其中包含填充。 Firefox正如我通常所期望的那样包装文本。

这是我的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>溢出

任何指向正确方向的人都会赞赏。

Answer 1

尝试使用display:inline或display:inline-block（如果需要设置高度/宽度 - 请注意：IE 7及更低版本不支持），而不是使用绝对定位。

您可以将display全部放在一起，因为图像和跨度是内联的。我在这里删除了example，只删除了图像和周围链接的样式。

您还可以将图像用作按钮的背景，并将填充设置为占用空间。例如：

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

example