由于浏览器渲染不一致，Bootstrap导航栏在Firefox和Chrome中的显示方式不同
下面的屏幕截图是我的bootstrap导航栏，效果很好（根据规格，药片一个接一个地消失）。但是，当按比例缩小到各种屏幕尺寸时，导航栏不再符合插线并变得交错。
Chrome中的问题比Firefox更糟糕，因为导航栏的左侧部分不会位于屏幕顶部。
如果我可以让Chrome看起来像Firefox屏幕截图，这将有助于我解决剩余的问题。
任何人都可以建议哪个浏览器渲染不一致可以解释为什么在Chrome版本上，导航栏的左手部分与屏幕顶部没有齐平？
顶部是Chrome，底部是FireFox。
<header>
<div class="vr-nav-container" data-ng-controller="navBarController">
<div>
<div class="col vr-nav-col1">
<div class="nowrap">
<nav class='navbar navbar-default navbar-static-top no-padding" role="navigation"'>
<a class='navbar-brand' href='/Default'>
<img height="30" class="logo" alt="Flatty" src="/Assets/images/logo-small-rocket-lg.png" />
<img height="30" id="xs-toggler" class="logo-xs" alt="Flatty" src="/Assets/images/logo_xs.png" />
</a>
</nav>
</div>
</div>
<div class="col vr-nav-col2 fill center">
<div class="nowrap">
<nav class='navbar navbar-default navbar-static-top " role="navigation"'>
<div class="tabbable ">
<ul class="nav nav-pills contrast-background">
<li data-ng-repeat="item in NavBarViewModel">
<a href="{{item.Path}}"><i class="{{item.Icon}}"></i>
{{item.Title}}
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="col vr-nav-col3">
<div class="nowrap">
<nav class='navbar navbar-default navbar-static-top" role="navigation"'>
<ul class='nav'>
<li ng-controller="awardBoxController" class='dropdown medium only-icon widget'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
<i class='icon-trophy'></i>
<div class='label'>{{AwardSummary.TotalPoints}}</div>
</a>
<ul class='dropdown-menu'>
<li>
<div class="box-content box-statistic">
<h3 class="title text-error">{{AwardSummary.Level}}</h3>
<small>{{AwardSummary.TotalPoints}} points</small>
<div class="text-banana icon-trophy align-right"></div>
</div>
</li>
<li><a href="/#/Awards/My-Points/">
<div class='points-history box-content widget-body'>
<div class='pull-left icon'>
<i class='icon- text-banana'></i>
</div>
<div class='pull-left text'>
<span><strong>Point History</strong> <span class="see-all">- see all</span></span>
<small class='text-muted'>{{award.AcheivedDate}}</small>
</div>
</div>
</a></li>
<li ng-repeat="award in AwardSummary.Awards">
<a href='#'>
<div class=' box-content widget-body'>
<div class='pull-left icon'>
<i class='icon-{{award.Icon}} text-success'></i>
</div>
<div class='pull-left text'>
{{award.Name}}
<span class="text-muted">+{{award.Points}}</span>
<small class='text-muted'>{{award.AcheviedDate| fromNow}}</small>
</div>
</div>
</a>
</li>
<li class='divider'></li>
<li class='widget-footer'>
<a href='/#/Awards/High-Scores/'>High Scores</a>
</li>
</ul>
</li>
<li class='dropdown medium user-menu'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
<img width="23" height="23" src="/Assets/images/avatar.jpg" />
<span class='user-name'>
<asp:Literal ID="UserFirstNameLiteral" runat="server" meta:resourcekey="UserFirstNameLiteral">FirstName LastName</asp:Literal></span>
<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
<a href='/UserAccount/UserProfile'>
<i class='icon-user'></i>
<%= this.GetGlobalResourceObject("MasterPage","Profile") %>
</a>
</li>
<li>
<a ng-if="ShowSettings" href='/Settings/Dashboard'>
<i class='icon-cog'></i>
<%= this.GetGlobalResourceObject("Resources","Settings") %>
</a>
</li>
<li>
<a ng-if="ShowSettings" href='http://todo.help.vr.zendeskurl.com'>
<i class='icon-bullhorn'></i>
<%= this.GetGlobalResourceObject("MasterPage","GetHelp") %>
</a>
</li>
<li class='divider'></li>
<li>
<form runat="server">
<asp:LinkButton ID="SignOutLinkButton" runat="server" OnClick="SignOutLinkButton_Click" meta:resourcekey="SignOutLinkButton">
<i class='icon-signout'></i> <%= this.GetGlobalResourceObject("Resources","SignOut") %>
</asp:LinkButton>
</form>
</li>
</ul>
</li>
</ul>
<div class='navbar-form navbar-right hidden-xs'>
<button class='btn btn-link dropdown-toggle' style="top: 4px;" name='button' data-toggle="dropdown" type='submit'><i class="icon-search"></i><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a category="" class="searchoption" href="#"><%= this.GetGlobalResourceObject("MasterPage","Everything") %></a>
</li>
<li class="divider"></li>
<li>
<a category="Deals" class="searchoption" href="#"><%= this.GetGlobalResourceObject("Resources","Deals") %></a>
</li>
<li>
<a category="Contacts" class="searchoption" href="#"><%= this.GetGlobalResourceObject("Resources","Contacts") %></a>
</li>
<li>
<a category="Accounts" class="searchoption" href="#"><%= this.GetGlobalResourceObject("Resources","Accounts") %></a>
</li>
<li>
<a category="Tasks" class="searchoption" href="#"><%= this.GetGlobalResourceObject("Resources","Tasks") %></a>
</li>
</ul>
<div class='form-group'>
<input value="" id="searchBox" class="form-control" placeholder='<%= this.GetGlobalResourceObject("Resources","Search") %>...' autocomplete="off" id="q_header" name="q" type="text" />
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
CSS
我正在使用默认的bootstrap 3.0 CSS并且有一个单独的CSS文件覆盖了一些默认的CSS并添加了我自己的
我必须这样做，因为药丸部分必须在中心列中的自己的div中才能工作（随着宽度的减小逐个消失和'堆叠'）并填充左右之间的所有宽度导航栏中的cols。
.navbar-collapse:after {
clear: none;
}
.sorting, .sorting_asc, .sorting_desc {
background : none;
}
.top-buffer {
margin-top: 20px !important;
}
.removeclass{
font-size: 1.5em;
vertical-align: middle !important;
}
.removeclass:hover{
text-decoration: none;
}
.vr-navigation {
float: left;
width: 100%;
}
.rightnav {
float: right;
width: 285px;
margin-left: -160px;
}
.leftnav {
margin-right: 160px;
padding:0 10px;
width:auto;
height: 40px;
}
.nav-pills {
height: 40px;
}
.hidden-xs {
display: inline-block !important;
}
@media (max-width: 767px) {
.hidden-xs {
display: none!important;
}
}
.current {
font-weight: bold;
}
.nav-pills li a {
color: white;
}
.vr-nav-container
{
display: table;
}
.vr-nav-container > div
{
display: table-row;
}
.vr-nav-container > div > div
{
display: table-cell;
}
.vr-nav-container > div > div
{
padding: 0em;
}
.vr-nav-container .nowrap
{
white-space: nowrap;
}
.vr-nav-container .fill
{
margin: 0 auto;
}
.vr-nav-container .center
{
text-align: center;
}
.vr-nav-col1
{
/*background: red;*/
width: 5%;
min-width: 50px;
white-space: nowrap;
}
.vr-nav-col2
{
width: 50%;
margin: 0 auto;
/*background: yellow;*/
}
.vr-nav-col3
{
/*background: green;*/
width: 40%;
/*min-width: 260px;*/
}
.no-padding
{
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-nav-closed #main-nav .navigation > .nav > li:hover > a.toggler-flyout > span
{
display: none;
}
/*.main-nav-closed #main-nav .navigation > .nav > li:hover > a.toggler-flyout > i
{
content: "\f061";
}*/
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？