在水平标签中向右拉徽章时挣扎（仅适用于IE9）

Question

我有个小提琴在IE8，Chrome和Firefox中使用，但在IE9中却失败。

我正在使用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

您应该通过用户引导程序列布局或通过设置固定宽度来指定导航选项卡的宽度。 作为测试，只需在nav-tabs中添加style =“ width：180px”，就可以了。

请参阅具有以下CSS的更新的Fiddle ：

.nav-tabs {
    width:180px;
}

Answer 2

通过删除右上角类，我能够在IE中修复此问题。

Bootstrap具有为导航标签设计的徽章。 右上角类不是必需的。

Answer 3

在span元素中，只需删除pull-right类，然后将标题文本移到span标记的左侧即可。 在css中，对于徽章类，请使空白很重要。 将ul显示为表格，并固定表格布局。

在列表元素中，使用样式display:table-cell

请尝试以下示例：

/*In Css*/
.badge {
  display: inline-block;
  white-space: nowrap !important;
}

在您的HTML中

 <ul class="nav nav-tabs" style="vertical-align: top; width: 100%; display: table;table-layout: fixed;">

    <li class="active" style="display: table-cell">
        <a href="#Inbound" data-toggle="tab" `enter code here`style="text-decoration: none">Messages<span class="badge" runat="server" id="MsgCount">0</span>
       </a>
    </li>
</ul>