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>
4

2 回答 2

0

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

于 2013-07-13T21:23:16.403 回答
0

删除像素值之间的空格。

height: 100 px;到height: 100px;

于 2013-07-13T21:25:09.390 回答