Positioning a background image within an <a> element

Question

这个显示了一个位于<a>元素中一些文本旁边的关闭图标(这是用来关闭Bootstrap选项卡的)。HTML看起来像这样:

<li class="active"><a data-toggle="tab" href="#tab1">Page 1<span class="closeIcon"></span></a></li> 

所以在文本之后有一个span，类为closeIcon, css为图标设置了一个背景图像。

这在Firefox, Chrome, Safari和Opera中工作得很好，但在IE11中却惨败-图标出现在下一行。我没有在IE <11中尝试过，但它可能也不起作用。

有什么办法可以解决这个问题吗?CSS是:

.closeIcon {
  width:16px;
  height:16px;
  float:right;
  margin:2px -10px 0 4px;
  background:url('http://s21.postimg.org/jam8gpcr7/themes_windows_global_icons_close.png') 0 0;
}

谢谢。

Answer 1

使用background简写来定位元素并将显示更改为inline-block，而不是浮动。

例子

.closeIcon {
    width:16px;
    height:16px;
    margin:2px -10px 0 4px;
    display:inline-block;
    background: url('http://s21.postimg.org/jam8gpcr7/themes_windows_global_icons_close.png') -1px 4px / 64px 16px no-repeat;
}