我有一个非常奇怪的问题。这是我正在使用的HTML：
<!DOCTYPE HTML>
<html>
<head>
<style type='text/css'>
<title>Site name</title>
*{
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
html{
background: #BED4EB;
}
body{
background: #FFFFFF;
width: 1000px;
margin: 0px auto;
padding-bottom: 25px;
}
header{
background-image: linear-gradient(to bottom, #004F9E 0%, #00284F 100%);
padding: 10px 0px;
}
header h1{
color: #FFFFFF;
display: inline;
font-size: 2.5em;
}
header nav{
display: inline-block;
float: right;
}
header nav ul li{
margin: 0px 20px;
display: inline-block;
}
header nav ul li a{
color: #FFFFFF;
text-decoration: none;
font-size: 1.4em;
}
header nav ul li a:hover{
color: #FFA54D;
}
section#quick_login{
width: 20%;
float: right;
background: #91A9FA;
border: 1px solid #5D82FC;
margin: 0px 0px 5px 5px;
padding: 5px;
text-align: center;
}
section#quick_login input{
padding: 3px;
border-radius: 3px;
border: 1px solid #BDBDBD;
}
section#notices{
display: inline-block;
width: 75%;
}
section#notices .alert, section#notices .notice{
padding: 5px;
display: inline-block;
}
section#notices .alert{
background: #FA9191;
border: 1px solid #FC5D5D;
}
section#notices .notice{
background: #91A9FA;
border: 1px solid #5D82FC;
}
section#main h2{
margin-top: 25px;
}
section#main p{
margin-top: 5px;
}
</style>
</head>
<body>
<header>
<h1>Site name</h1>
<nav>
<ul>
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
<li>
<a href='#'>Link 4</a>
</li>
<li>
<a href='#'>Link 5</a>
</li>
</ul>
</nav>
</header>
<section id='quick_login'>
<h2>Quick login</h2>
<form action='login.php'>
Username: <input type='text' placeholder='Your username' name='username' />
<br />Password: <input type='password' placeholder='Your password' name='password' />
<br /><input type='submit' value='Go' />
</form>
</section>
<section id='notices'>
<p class='alert'>
Your email address hasn't been verified; check your email for a link to verify it.
</p>
<p class='notice'>
We received a record 553 visitors yesterday!
</p>
</section>
<section id='main'>
<h2>Subtitle 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl risus, viverra eu sollicitudin volutpat, ultricies vel sapien. Cras in felis eu justo mattis convallis vel et orci. Maecenas consequat fermentum magna, sit amet dapibus nulla pulvinar venenatis. Nullam nulla mi, consectetur id diam at, pulvinar tempus diam. Morbi suscipit odio nec arcu ultricies dignissim. Curabitur consectetur libero lectus, ornare sodales tellus congue nec. Nam id tellus id nulla eleifend condimentum.</p>
<h2>Subtitle 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus nisi, mattis vitae volutpat tempus, suscipit nec lorem. Quisque posuere lectus odio, porttitor sagittis ligula ullamcorper quis. Vivamus ornare ut sapien in rutrum. Nullam et porttitor metus. Curabitur ornare orci sit amet aliquam rutrum. Phasellus scelerisque dignissim tellus in dictum. Pellentesque eu nibh purus. Nulla scelerisque sodales urna in feugiat. Maecenas et eleifend neque. Sed dolor turpis, congue et nisl quis, euismod bibendum magna. Sed eget laoreet urna.</p>
</section>
</body>
</html>
它完美显示（除了我正在处理的不垂直对齐的菜单）：
correct http://gyazo.com/67f6acd6397fb4551e1852ba91836a24.png
但是当我用<style>替换<link rel='stylesheet' type='text/css' href='style.css' />代码并将<style>代码中的所有内容复制/粘贴到style.css时，它会显示如下：
why? http://gyazo.com/5cf93936ef4afa0031a5f64bbc3e8ce2.png
造成这种情况的原因是什么？我如何解决它？它似乎是特定于浏览器的，因为Firefox完美地显示它。仅在Chrome中显示不正确。
答案 0 :(得分：1)
看起来这是由header h1 { display: inline; }规则没有得到正确遵循造成的。
如果在页面中包含css时禁用此规则，则会导致您通过链接标记包含样式表时遇到的损坏渲染。
此外，标题标签应直接位于头部下方而不是样式部分。
答案 1 :(得分：1)
标题标记位于样式部分，导致标题显示不正确http://jsfiddle.net/Paul_Geronca/2ZCVw/4/
修复此问题：
<!DOCTYPE HTML>
<html>
<head>
<style type='text/css'>
<title>Site name</title>
*{
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
html{
background: #BED4EB;
}
body{
background: #FFFFFF;
width: 1000px;
margin: 0px auto;
padding-bottom: 25px;
}
header{
background-image: linear-gradient(to bottom, #004F9E 0%, #00284F 100%);
padding: 10px 0px;
}
header h1{
color: #FFFFFF;
display: inline;
font-size: 2.5em;
}
header nav{
display: inline-block;
float: right;
}
header nav ul li{
margin: 0px 20px;
display: inline-block;
}
header nav ul li a{
color: #FFFFFF;
text-decoration: none;
font-size: 1.4em;
}
header nav ul li a:hover{
color: #FFA54D;
}
section#quick_login{
width: 20%;
float: right;
background: #91A9FA;
border: 1px solid #5D82FC;
margin: 0px 0px 5px 5px;
padding: 5px;
text-align: center;
}
section#quick_login input{
padding: 3px;
border-radius: 3px;
border: 1px solid #BDBDBD;
}
section#notices{
display: inline-block;
width: 75%;
}
section#notices .alert, section#notices .notice{
padding: 5px;
display: inline-block;
}
section#notices .alert{
background: #FA9191;
border: 1px solid #FC5D5D;
}
section#notices .notice{
background: #91A9FA;
border: 1px solid #5D82FC;
}
section#main h2{
margin-top: 25px;
}
section#main p{
margin-top: 5px;
}
</style>
</head>
<body>
<header>
<h1>Site name</h1>
<nav>
<ul>
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
<li>
<a href='#'>Link 4</a>
</li>
<li>
<a href='#'>Link 5</a>
</li>
</ul>
</nav>
</header>
<section id='quick_login'>
<h2>Quick login</h2>
<form action='login.php'>
Username: <input type='text' placeholder='Your username' name='username' />
<br />Password: <input type='password' placeholder='Your password' name='password' />
<br /><input type='submit' value='Go' />
</form>
</section>
<section id='notices'>
<p class='alert'>
Your email address hasn't been verified; check your email for a link to verify it.
</p>
<p class='notice'>
We received a record 553 visitors yesterday!
</p>
</section>
<section id='main'>
<h2>Subtitle 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl risus, viverra eu sollicitudin volutpat, ultricies vel sapien. Cras in felis eu justo mattis convallis vel et orci. Maecenas consequat fermentum magna, sit amet dapibus nulla pulvinar venenatis. Nullam nulla mi, consectetur id diam at, pulvinar tempus diam. Morbi suscipit odio nec arcu ultricies dignissim. Curabitur consectetur libero lectus, ornare sodales tellus congue nec. Nam id tellus id nulla eleifend condimentum.</p>
<h2>Subtitle 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus nisi, mattis vitae volutpat tempus, suscipit nec lorem. Quisque posuere lectus odio, porttitor sagittis ligula ullamcorper quis. Vivamus ornare ut sapien in rutrum. Nullam et porttitor metus. Curabitur ornare orci sit amet aliquam rutrum. Phasellus scelerisque dignissim tellus in dictum. Pellentesque eu nibh purus. Nulla scelerisque sodales urna in feugiat. Maecenas et eleifend neque. Sed dolor turpis, congue et nisl quis, euismod bibendum magna. Sed eget laoreet urna.</p>
</section>
</body>
</html>
答案 2 :(得分：0)
也许你应该试试W3C validator。它将检查您的HTML或CSS（上传style.css）是否有错误。如果它不起作用，我会要求您分享您的HTML代码或提供一个网址。