奇怪的CSS問題

我一直在關注本教程：http://ruby.railstutorial.org/chapters/filling-in-the-layout#top由於某種原因，當我第一次在本地運行應用程序時，div的「home」「help」和「註冊」鏈接出現在頁面的更遠處這應該。但是，當我刷新頁面時，div會返回到正確的位置。我怎樣才能解決這個問題？奇怪的CSS問題

更新：

看來問題只在於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; 
}

來源

2011-02-26 Justin Meltzer

OK完成........ – 2011-02-26 01:38:49

'「但是，當我刷新頁面時，div會返回到正確的位置。」' - this聽起來不像HTML/CSS問題。瀏覽器有時可能會做一些奇怪的事情，但他們通常會在刷新之間做相同的奇怪事情。 – thirtydot 2011-02-26 02:06:05

哪個瀏覽器和版本有問題？ – 2011-02-26 02:52:55

嘗試addding適當的文檔類型，並檢查

來源

2011-03-28 11:06:18

html是html 5的正確文檔類型 – 2011-07-05 16:16:46

奇怪的CSS問題

回答

相關問題