Chrome有时会以不同的方式呈现我的HTML / CSS
[英]Chrome occasionally renders my HTML/CSS differently
问题描述
I just started learning HTML/CSS and am trying to make a personal site from scratch (no CSS tools) 
我刚刚开始学习HTML / CSS，并试图从头开始创建个人网站（没有CSS工具）
When I tested my site in Firefox and IE last night it looked nice and clean as seen 昨晚当我在Firefox和IE中测试我的网站时，它看起来很干净
When I tested my site in Chrome my links got moved around: 当我在Chrome中测试我的网站时，我的链接四处移动：
Does anybody know what happened here? 有人知道这里发生了什么吗？ This is my markup: 这是我的标记：
<!DOCTYPE html>
<html>
<head>
<title>Home | Some Website!</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 960px;
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
background-color: #FFFFF0;
margin: 0 auto;
}
#header {
border-style: solid;
}
#header img {
margin: 4px 0px 0px 4px;
}
#header ul {
list-style-type: none;
display: inline;
margin: 25px 30px 0px 0px;
float: right;
font-size: x-large;
}
#header ul li {
display: inline;
margin: 0 30px;
}
#header li a:link {
color: #FF00FF;
text-decoration: none;
}
#header li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="header">
<img src="http://i.imgur.com/YbAx7y1.png" alt="Temp Logo!">
<ul>
<li><a href="about.html">About Me</a></li>
<li><a href="resume.html">Résumé</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</body>
</html>
2 个解决方案
解决方案1
0 2013-08-19 18:20:02
Change #header ul css definition from display: inline; 从display: inline;更改#header ul css定义display: inline; to display: inline-block; display: inline-block; . 。
解决方案2
0 2013-08-19 18:24:00
Every browser interprets things differently. 每个浏览器对事物的解释都不同。 You should be more specific than body { font-size: small } . 您应该比body { font-size: small }更具体。 I recommend using a px value unless you really intend to leave it up to the browser. 我建议使用px值，除非您确实打算将其留给浏览器使用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.