到目前为止，我一直使用Safari来查看我的布局。在Safari中，一切都像我希望的那样完美，一个简单的布局，有一个徽标、导航栏、标题图像，然后是一个两列的正文区域。然而，在Firefox中，标题图像和徽标甚至都没有显示，正文区域的两列浮动不起作用，而是陷入一列。。。我不确定发生了什么，也不确定我在其他浏览器中会遇到什么类型的问题，但也许有人能找到问题所在：
body {
background-color: some color;
background-attachment:fixed;
margin: 0;
padding: 0;
}
#wrapper {
width: 950px;
background-color: some color;
margin: 0 auto;
text-align: left;
border-right: 1px solid some color;
border-left: 1px solid some color;
}
#logo {
background-image: url('some url');
height: 100 px;
text-align: left;
border-style: none;
}
#navigation {
background-color: some color;
text-align: center;
border-top: 2px solid some color;
border-bottom: 2px solid some color;
height: 30 px;
}
#navigationElement {
display: inline-block;
padding-top: 2 px;
padding-left: 10 px;
padding-right: 10 px;
border-style: none;
}
#navigationElement a:link {
color: some color;
text-decoration: none;
}
#navigationElement a:hover {
color: some color;
font-weight: bold;
}
#headerImg {
background-image: url('some url');
height: 200 px;
text-align: left;
border-style: none;
}
#left {
background-color: some color;
width: 475 px;
float: left;
text-align: center;
border-style: none;
}
#leftElement {
background-color: some color;
padding: 40 px;
text-align: center;
border-style: none;
}
#right {
background-color: some color;
width: 475 px;
float: right;
text-align: center;
border-style: none;
}
#rightElement {
background-color: some color;
padding: 40 px;
text-align: center;
border-style: none;
}
#footer {
background-color: some color;
height: 40 px;
text-align: left;
border-style: none;
clear: both;
}
这是html代码：
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="navigation">
<div id="navigationElement"><a href="link1">nav 1</a></div>
<div id="navigationElement"><a href="link2">nav 2</a></div>
<div id="navigationElement"><a href="link3">nav 3</a></div>
</div>
<div id="headerImg"></div>
<div id="bodyArea">
<div id="left">
<div id="leftElement">
left element text 1
</div>
<div id="leftElement">
left element text 2
</div>
</div>
<div id="right">
<div id="rightElement">
right element text 1
</div>
<div id="rightElement">
right element text 2
</div>
</div>
<div id="footer">some footer text</div>
</div>
</body>
这可能是因为在高度属性中的值和px之间使用了空格（即height: 100 px;应该是height: 100px;）。不同的浏览器对这类错误的处理方式不同，所以当你遇到奇怪的错误时，验证你的css总是一个好主意：http://jigsaw.w3.org/css-validator/
删除像素值之间的空格。
height: 100 px;到height: 100px;