Question

我正在学习Ruby on Rails，按照Micheal Hartl的教程创建一个推特克隆。

我正在处理首页的CSS代码。但出于一些奇怪的原因，它为Firefox和Chrome提供了不同的视图。

我添加了截图。右上方的导航栏（包括主页，帮助和登录）似乎在Firefox中消失。

我尝试过修改代码，但我似乎无法让徽标和导航栏在Firefox中对齐，就像它们在Chrome中对齐一样。

Chrome

Firefox

这是CSS代码：

.container{

width: 710px;
padding-left:30px;
}

body{

background: #cff;
padding-left:30px;
margin:1em;
}

header{
 margin-top: 30px;
 padding-top: 30px;
 padding-left: 20px;


}

header img {
padding: 1em;
background: #fff;
position: relative;
margin-left:-1.1em;
}

section{
 margin-top:1em;
 font-size:120%;
 padding:20px;
 background: #fff;
 }

 section h1{
 font-size:200%;
 }


 a{
 color: #09c  ;
 text-decoration:none;
 }

 a:hover{
 color: #069;
 text-decoration:underline;
 font-weight:bold;
 }

 a:visited{
 color:#069;
 }

 nav{

 float:right;
 background: white;
 padding: 0 0.7em;
white-space:nowrap;
margin-top: -5.4em;
margin-left:-0.4em;


 }

 nav ul{

 margin: 0;
 padding: 0;
 }

 nav ul li{

 list-style-type:none;
 display:inline-block;
 padding:0.2em 0;
 }

 nav ul li a {

 padding: 0 5px;
 font-weight: bold;
 }

 nav ul li a:visited{
 color: #09c;
 }

 nav ul li a:hover{
 text-decoration:underline;
 }


 a.signup {

 margin-left:auto;
 margin-right:auto;
 display:block;
 text-align:center;
 width: 190px;
 color:#fff;
 background: #006400;
 font-size:150%;
 font-weight:bold;
 padding:20px;
 }

 .round{

 border-radius: 10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 }

 footer {

 text-align: center;
 width:800px;
 margin-left:auto;
 margin-right:auto;
 margin-top:100px;
 } 

 footer nav{

 float:none;
 }

图像和导航在header.html.erb页面中定义。该页面的代码是：

<header>
      <%= link_to logo,root_path %>
     <nav class = "round">


      <ul>

       <li> <%= link_to "Home", root_path %></li>
       <li> <%= link_to "Help", help_path %></li>
       <li> <%= link_to "Sign in", '#' %></li>
      </ul> 
      </nav>
</header>

以下是Chrome生成的源代码：

<body>
   <div class="container">
    <header>
      <a href="/"><img alt="Sample app" class="round" src="/assets/logo.png" /></a>
     <nav class = "round">


      <ul>

       <li> <a href="/">Home</a></li>
       <li> <a href="/help">Help</a></li>
       <li> <a href="#">Sign in</a></li>
      </ul> 
      </nav>
</header>
    <section class ="round">

<h1>KHEMS</h1>
<p>
This is the home page for Khems - A Micro blogging App. It is similar to Twitter.
</p>

<a href="#" class="signup round">Sign up now!</a>


     </section>
     <footer>
 <nav class = "round">
  <ul>
    <li> <a href="/about">About</a></li>
    <li> <a href="/contact">Contact</a></li>
    <li> <a href="https://github.com/piy9/Twitter_clone" target="_blank">Git Repo</a></li>
    <li> <a href="http://railstutorial.org" target="_blank">Rails Tutorial</a></li>
    </ul>
</nav>
</footer>

     </div> 
</body>

Firefox生成的源代码：

 <body>
   <div class="container">
    <header>
      <a href="/"><img alt="Sample app" class="round" src="/assets/logo.png" /></a>
     <nav class = "round">


      <ul>

       <li> <a href="/">Home</a></li>
       <li> <a href="/help">Help</a></li>
       <li> <a href="#">Sign in</a></li>
      </ul> 
      </nav>
</header>
    <section class ="round">

<h1>KHEMS</h1>
<p>
This is the home page for Khems - A Micro blogging App. It is similar to Twitter.
</p>

<a href="#" class="signup round">Sign up now!</a>


     </section>
     <footer>
 <nav class = "round">
  <ul>
    <li> <a href="/about">About</a></li>
    <li> <a href="/contact">Contact</a></li>
    <li> <a href="https://github.com/piy9/Twitter_clone" target="_blank">Git Repo</a></li>
    <li> <a href="http://railstutorial.org" target="_blank">Rails Tutorial</a></li>
    </ul>
</nav>
</footer>

     </div> 
</body>

Answer 1

我认为问题的一部分是你有这个CSS定义：

nav {
    float: right;
    background: white;
    padding: 0 0.7em;
    white-space: nowrap;
    margin-top: -5.4em;
    margin-left: -0.4em;
}

您的nav和<header>中的<footer>适用于 BOTH 。我会完全删除margin-top: -5.4em;，然后更改此CSS定义：

footer {
   text-align: center;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
  margin-top: 100px;
}

将margin-top: 100px;更新为类似margin-top: 20px;的内容，看看您是否有更好的运气。

CSS代码在Chrome和Firefox中呈现不同的结果

1 个答案: