css - 相对位置内的绝对位置元素会导致Chrome/Safari溢出

我们正在尝试解决的问题是，文本在<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>溢出：



任何朝着正确方向的指针表示赞赏。

最佳答案

代替使用绝对定位，请尝试使用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

关于css - 相对位置内的绝对位置元素会导致Chrome/Safari溢出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14280293/