css - Bootstrap CSS 导航栏高度在 IE 和 FF 中很大，在 Chrome 中正确

Question

我正在使用 BootStrap3 CSS 导航栏。在我的 jsfiddle 演示中，它在 Chrome 和 FF&IE 之间运行良好，但在网站上，FF&IE 在菜单下方有一个巨大的栏/空白区域。我似乎无法使用 FF 元素检查器找到问题。如果我禁用我的主题样式，它会修复其中的一些，但它仍然很大，所以那里可能存在一些冲突。我已经禁用了大部分我能想到的东西，但仍然无法弄清楚冲突或我做错了什么。

JS Fiddle对比Website

<div class="navbar navbar-default navbar-inverse" role="navigation">
    <div class="navbar-header"> <a class="navbar-brand" href="#"> Year </a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#year-navs"> <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="year-navs">
        <ul class="nav navbar-nav">
            <li><a href="/football/colorado/team/mountain_range/2007/">2007</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2008/">2008</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2009/">2009</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2010/">2010</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2011/">2011</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2012/">2012</a>
            </li>
            <li class="active"><a href="/football/colorado/team/mountain_range/2013/">2013</a>
            </li>
        </ul>
    </div>
</div>

它应该只有 52px(左右)高。

我做错了什么？冲突的 CSS 在哪里？我没有正确使用/安装 Bootstrap CSS 吗？

Answer 1

这花了我一段时间才弄清楚，然后很明显:

您的侧边栏向左浮动。 navbar正在清除 float ，因此它可以优雅地包含它们(其中的所有导航元素都是 float 的)，但由于它不在 float 元素内，因此它正在清除周围的所有 float 。

您需要添加 float: left (或 float: right )到包含元素所以 navbar不会尝试清除该容器外的 float 。

你有 <div style="margin: 0 0 0 170px;">在您的代码中，这似乎是相关的容器。

相反，尝试使用负的左边距、左填充进行补偿和 100% 宽度:

<div style="margin: 0 0 0 -170px; float: right; padding-left: 170px; width: 100%;">

您可能应该将其移至您的样式表，但我打赌您知道这一点。