我在一个站点工作,该站点的页脚显示在 Firefox 中很好,但 chrome 显示错误。错误,我的意思是,看看下面的图片:
火狐一。
这是镀铬的:
这是我的**页脚部分:**
<div class="navbar navbar-fixed-bottom">
<div class="row-fluid">
<div class="span4" id="foo_left">
<ul>
<li><%= link_to "About Us" , '/about' %></li>
<li><%= link_to "Contact" , '/contact' %></li>
<li><%= link_to "How it Works" , '/howitworks' %></li>
</ul>
</div>
<div class="span4" id="company"><p>Copyright 2013 Rawdi. All rights reserved.</p></div>
<div class="span4" id="foo_right">
<ul>
<li><%= link_to "Privacy" , '/privacy' %></li>
<li><%= link_to "Terms & Policies" , '/tnc' %></li>
</ul>
</div>
</div>
这是那个(SASS)的CSS:
#footer {
padding-top: 10px;
margin-top:15px;
.row-fluid {
padding-top:10px;
background-color: #060606;
#foo_left {
float:left;
ul {
list-style: none;
li {
display: inline;
border-right: 1px solid grey;
a {
margin: 5px 10px 5px 5px;
}
a:hover {
text-decoration: none;
margin: 5px 10px 5px 5px;
}
}
}
}
#foo_right {
float:right;
ul {
float:right;
list-style: none;
margin-right: 10px;
li {
display: inline;
border-right: 1px solid grey;
a {
margin: 5px 10px 5px 5px;
}
a:hover {
text-decoration: none;
margin: 5px 10px 5px 5px;
}
}
}
}
#company {
float:center;
text-align: center;
font-size: 12px;
}
}
}
这是application.html.erb以获得更多信息:
<body>
<div id="header" class="container"><%= render 'layouts/header' %><%= render 'layouts/dropdown' unless @disable_dropdown %></div>
<div class="container" id="body">
<%= yield %>
</div>
<div id="footer" class="container-fluid"><%= render 'layouts/footer' %></div>
为什么会这样?为什么 chorme 和 firefox 显示不同的布局?帮助。