css - 相对元素中的绝对定位元素导致 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 放在一起，因为图像和 span 一开始是内联的。我有一个 example此处删除跨度并仅设置图像和周围链接的样式。

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

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

example