gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 14:21:25 29 4
gpt4 key购买 nike

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

Really Large in FF

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

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

最佳答案

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

您的侧边栏向左浮动。 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%;">

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

关于css - Bootstrap CSS 导航栏高度在 IE 和 FF 中很大,在 Chrome 中正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19898475/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com