Question

我注意到在我的一个使用Bootstrap的网站中存在一个小样式问题。这个问题似乎只发生在IE8中，其中一个字形图标嵌套在锚点/跨度中。

在努力用CSS解决这个问题之后，我没有弄乱图标上的弹出窗口，我只是停止包装用于弹出窗口的图标，问题就消失了。通过创建包含弹出窗口的数据属性的锚点，并在锚点内添加<i class="some-icon"></i>，可以轻松重现该问题。如果它与其他文本位于同一行，则会更加明显。

请参阅fiddle

**我似乎无法在IE8中加载jsfiddle而不会爆炸，因此您可能需要在本地重新创建小提琴。

如果向锚点添加不间断空格或任何文本，则图标会将该属性与文本对齐。如果锚点/跨度仅包含图标，则垂直对齐的图标似乎会跳下来。

我仍然想知道如何用css解决问题。谢谢！

Answer 1

看起来我在小提琴中发布的工作似乎是解决这个问题的最简单方法。如果您在锚点或跨度内使用单个字形图标来触发twitter bootstrap中的某种类型的弹出窗口：

<a class="pop-me-over" data-toggle="popover" data-placement="top" data-content="This is some extra information." data-title="Information">
<i class="icon-info-sign"></i>
</a>

只需将弹出数据属性添加到<i></i>并删除包装元素即可。这修复了IE8中的图标对齐问题。

<i class="pop-me-over icon-info-sign" data-toggle="popover" 
data-placement="top" data-content="This is some extra information." data-title="Information"></i>

Answer 2

这适用于我在锚点内的嵌套跨度：

  span.label {
      display:inline;
      top:0px !important;
  }

嵌套在元素中的引导程序图标在IE8中对齐错误

2 个答案: