css - 在水平选项卡中与徽章右拉斗争(仅限 IE9)

Question

我有一个在 IE8、Chrome 和 Firefox 中显示单词但在 IE9 中失败的 fiddle 。

我使用的是 bootstrap 2.3.2，我希望徽章与文本位于同一行，但位于右侧。这适用于除 IE9 之外的所有浏览器。在 IE9 中，徽章显示在文本下方。

参见:http://jsfiddle.net/DvxHe/

<div class='tabs-left'>
  <ul class='nav nav-tabs'>
    <li>
      <a href="#specializations_tab" data-toggle="tab">
        Specializations
        <span id="specializations-count" class="badge badge-info section-count pull-right">
          0
        </span>
      </a>
    </li>
    <!-- lots more like above -->
  </ul>
</div>

Answer 1

您应该通过用户 Bootstrap 列布局或设置固定宽度来指定导航选项卡的宽度。作为测试，只需将 style="width:180px"添加到导航选项卡，一切都很好。

查看更新的 Fiddle具有以下 CSS:

.nav-tabs {
    width:180px;
}