Firefox中Bootstrap导航选项卡下的意外细线

Question

Bootstrap3。标签下面很奇怪的细线。但不是所有选项卡，“设置”选项卡都没有，下面没有线条。

它只显示firefox中的行。其他浏览器很好。

任何人都有与我相同的问题吗？

<ul class="nav nav-tabs">
    <li class="active"><a href="my_account.php"> Profile</a></li>
    <li><a href="my_account_settings.php"><i class="glyphicon glyphicon-cog"></i> Settings</a></li>
    <li><a href="my_account_credits.php"> Credits</a></li>  
</ul>

Answer 1

导航标签将有一个边框，来自：

.nav-tabs {
    border-bottom: 1px solid #DDDDDD;
}

对于活动标签，此边框（底部）将被隐藏：

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
{
    border-color: #DDDDDD #DDDDDD transparent;
}

当你更改这个css代码时，b.e。将.nav-tabs边框设置为2px，活动的底部边框不再隐藏。

<强>更新

根据你的代码（包含在.container div中）在FF en Chrome中看到这个：

图片中配置文件标签下的行不符合预期。只使用Bootstrap的css尝试你的代码。您的自定义CSS会更改边框颜色（.nav-tabs＆gt; li.active＆gt;等等）吗？

Answer 2

我有同样的问题并解决了它。这条线的原因是我在导航中添加了徽章：

<span class="badge">xx</span>

为了删除细线，我刚刚在徽章上添加了一个“右拉”类并且它有效：

<span class="badge pull-right">xx</a>

Answer 3

我也遇到了这个问题，无法确定css有什么问题，尽管我在Chrome上有这个问题。我注意到只有在标签页面中有图标或img时才会发生这种情况。如果删除设置标签页中的图标，您会看到这个吗？尝试删除它。