Question

我一直在关注本教程：http://ruby.railstutorial.org/chapters/filling-in-the-layout#top由于某种原因，当我第一次在本地运行应用时，带有“主页”“帮助”和“注册”链接的div会显示在页面的下方它应该在哪里。但是，当我刷新页面时，div返回到正确的位置。我该如何解决这个问题？

更新：

似乎问题仅出在Chrome上。这是网址：http://justinsapp.heroku.com/

测试一下。

这是html：

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Ruby on Rails Tutorial Sample App | Home</title> 
    <meta name="csrf-param" content="authenticity_token"/> 
<meta name="csrf-token" content="Uo4YKU6Vu+F9vdWzOFBS0YcDbiVoXf/xmiZpThwhwh4="/> 
    <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<link href="/stylesheets/blueprint/screen.css?1298679396" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/blueprint/print.css?1298679396" media="print" rel="stylesheet" type="text/css" /> 
<!--[if lt IE 8]><link href="/stylesheets/blueprint/ie.css?1298679396" media="screen" rel="stylesheet" type="text/css" /><![endif]--> 
<link href="/stylesheets/custom.css?1298689435" media="screen" rel="stylesheet" type="text/css" /> 
  </head> 
  <body> 
    <div class="container"> 
      <header> 
  <a href="/"><img alt="Sample App" class="round" src="/images/logo.png?1298689435" /></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>Sample App</h1> 

<p> 
  This is the home page for the
  <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a> 
  sample application.
</p> 

<a href="/signup" class="signup_button 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="http://news.railstutorial.org/">News</a></li> 
     <li><a href="http://www.railstutorial.org/">Rails Tutorial</a></li> 
    </ul> 
  </nav> 
</footer> 
    </div> 
  </body> 
</html>

这是CSS：

.container {
 width: 710px;
}

body {
  background: #cff;
}

header {
  padding-top: 20px;
}

header img {
  padding: 1em;
  background: #fff;
}

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

section h1 {
  font-size: 200%;
}

/* Links */

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

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

a:visited {
  color: #069;
}

/* Navigation */

nav {
  float: right;
}

nav {
  background-color: white;
  padding: 0 0.7em;
  white-space: nowrap;
}

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_button {
  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 {
  -moz-border-radius:    10px;
  -webkit-border-radius: 10px;
  border-radius:         10px;
}

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

footer nav {
  float: none;
}

奇怪的CSS问题

0 个答案: