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

Question

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

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

现在,我用这个css为跨度的背景着色:

#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;
}

现在,这会显示正确排列的所有内容,但背景颜色不会超出单词"Unreviewed"的结尾.尽管是透明的png,但是图像是白色的,而不是#DA704B.

Firefox和Safari都是这种情况.任何帮助,将不胜感激!

Answer 1

跨度需要显示:块; 为了像那样工作.

#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;
}