Question

我在一个网站上工作，其中页脚显示在Firefox中很好，但chrome显示错误。错误，我的意思是，只看下面的图像：

Firefox 一个。

enter image description here

这是 chrome 之一：

enter image description here

这是我的**页脚部分：**

<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>

这是 css（SASS）：

#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显示不同的布局？帮助

Answer 1

没有float: center这样的事情。

当你为每个div分配span4时，你也不需要浮动。

Chrome中的Rails布局错误，但Firefox显示正常

1 个答案: