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>：

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

score 1 · Accepted Answer

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

您可以将display所有内容放在一起，因为图像和跨度从一开始就是内联的。我在这里有一个示例，删除了跨度并仅设置图像和周围链接的样式。

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

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

1 回答 1