Question

到目前为止，我已经使用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>

Answer 1

这可能是因为您在值和px高度属性之间使用空格（即height: 100 px;应为height: 100px;）。不同的浏览器会以不同的方式处理这类错误，因此在您遇到奇怪的错误时验证您的css总是一个好主意：http://jigsaw.w3.org/css-validator/

Answer 2

删除像素值之间的空格。

height: 100 px;至height: 100px;

布局CSS在safari中完美运行但在Firefox中没有？

2 个答案: