0

我目前正在按照 Micheal Hartl 的教程学习 Ruby on Rails,以创建 twitter 克隆。

我正在研究首页的 CSS 代码。但出于某种奇怪的原因,它为 Firefox 和 Chrome 呈现了不同的视图。

我添加了截图。右上角的导航栏(包括主页、帮助和登录)在 Firefox 中似乎消失了。

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

铬合金

火狐

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

火狐生成的源代码:

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

1 回答 1

0

我认为部分问题在于你有这个 CSS 定义:

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

这同时适用nav<header>和你的<footer>. 我将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;,看看你是否有更好的运气。

于 2014-01-08T16:48:30.547 回答