Question

此fiddle在<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＆lt; 11尝试过它，但它可能也没有在那里工作。

任何想法我怎么能为IE解决这个问题？ 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 shorthand定位元素并将显示更改为inline-block，而不是浮动。

Example Here

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

漂浮元素是罪魁祸首。

在<a> element</a>内定位背景图片

1 个答案: