Php 布局CSS在safari中工作得很好，但在firefox中却不行？_Php_Html_Css

Php 布局CSS在safari中工作得很好，但在firefox中却不行？

php html css

Php 布局CSS在safari中工作得很好，但在firefox中却不行？,php,html,css,Php,Html,Css,到目前为止，我一直使用Safari查看我的布局。一切都像我在Safari中希望的那样完美，一个简单的布局，带有徽标、导航栏、标题图像，然后是两列主体区域。然而，在Firefox中，标题图像和徽标都没有显示出来，主体区域的两列浮动不起作用，而是陷入一个。。。我不确定发生了什么，或者我在其他浏览器中会遇到什么类型的问题，但也许有人能找到问题所在： body { background-color: some color; background-attachment:fixed; margin: 0;

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


左元素文本1
左元素文本2
右元素文本1
 
右元素文本2
一些页脚文本

这可能是因为在高度属性中的值和px之间使用了空格（即

高度：100 px；

应该是

高度：100 px；

）。不同的浏览器处理这类错误的方式不同，因此在出现奇怪错误时验证css总是一个好主意：

删除像素值之间的空格

高度：100像素至<代码>高度：100px
我可以查看HTML吗？或者实际的CSS没有一些this
或一些this
？查看html代码会有所帮助too@Jen请创建背景色：一些颜色；这应该是什么？我添加了html代码。