Css a在相对元素内的单独定位元素导致Chrome/Safari中溢出

我们试图解决的问题是，文本溢出超过了

的末尾。这似乎是其内容的结果，其中包括一个相对位置

任何指向正确方向的指针都值得欣赏。
请尝试使用
display:inline
或
display:inline block
（如果需要设置高度/宽度-注意：IE 7及更低版本不支持）

您可以一起删除
显示
，因为图像和跨距是内联的。我有一个在这里删除跨度，只是造型的形象和周围的联系

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

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

为什么要使用绝对定位？使用
display:inline
或设置链接的
background image
和一些填充，您应该可以很好地做到这一点。是的，使用
display:inline
（实际上，
display:inline block
可以设置宽度）这就解决了。通过移除
显示：块
，Chrome可以正确包装。想补充一个问题吗？如果你想让我接受你的回答？当然。帮助有类似问题的人是件好事。我将很快为您起草一份答复：）
a {
    padding: 5px;
}
a span.icon {
    position: absolute;
    display: block;
    width: 15px;
    height: 15px;
}

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