0

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

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

见小提琴

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

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

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

4

2 回答 2

0

看起来我在小提琴中发布的解决方法是解决这个问题的最简单的方法。如果您在锚点或跨度内使用单个字形图标来触发 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>
于 2013-08-23T01:22:03.647 回答
0

这在锚内的嵌套跨度上对我有用：

  span.label {
      display:inline;
      top:0px !important;
  }
于 2014-02-26T13:25:18.737 回答