HTML：带有背景颜色和图像的跨度 - 为什么颜色不会出现在图像下方？答案

【问题标题】：HTML: span with a background color and image -- why doesn't the color appear under the image?HTML：带有背景颜色和图像的跨度 - 为什么颜色不会出现在图像下方？
【发布时间】：2010-10-26 22:49:35
【问题描述】：

我正在尝试在跨度内的文本旁边添加一个箭头图像。这是我正在使用的 HTML：

<span id="status" class='unreviewed'>
  Unreviewed 
  <img src="bullet_arrow_down.png" />
</span>

现在，我已经用这个 css 为 span 的背景上色了：

#status {
  float: right;
  position: relative;
  cursor: pointer;
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  color:#FFFFFF;
  font-size: 1.8em;
  top: 10px;
}

#status span.unreviewed {
  padding: 3px 4px; 
  background:#DA704B none repeat scroll 0 0;
}

#status span.unreviewed img {
  float: right;
}

现在，这会正确排列所有内容，但背景颜色不会超出“未审核”一词的末尾。该图像尽管是透明的 png，但后面是白色的，而不是 #DA704B。

Firefox 和 Safari 都是这种情况。任何帮助将不胜感激！

【问题讨论】：

标签： css image html

【解决方案1】：

Spans 需要有 display: block;为了那样工作。

#status {
  display: block;
  float: right;
  position: relative;
  cursor: pointer;
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  color:#FFFFFF;
  font-size: 1.8em;
  top: 10px;
}

【讨论】：

老实说，您可能应该将切换为
，这样您就可以正确地符合规范并且您的代码将固有地工作。

【解决方案2】：

嗯，让我眼前一亮的是：

#status span.unreviewed

将是类“未审查”的跨度选择器，它是#status 的后代。您正在寻找的选择器是

#status.unreviewed

您可能想查看 CSS2 的 w3c 规范以避免此类选择器问题。 http://www.w3.org/TR/CSS2/selector.html

希望对您有所帮助。

编辑：另一个要点，为什么不使用background-color 而不是background，因为你所做的只是改变背景颜色？

【讨论】：

【解决方案3】：

改变：

#status span.unreviewed {

到 span.unreviewed {

这适用于所有浏览器。

如果仍然无法正常工作，请尝试将其设为块级或使用 div，因为内联元素的着色效果不如预期

【讨论】：

【解决方案4】：

您可能还会发现值得声明：

#status span.unreviewed img {
background-color: transparent;
}

至少应该删除白色的默认图像背景。

【讨论】：