布局CSS在safari中完美工作，但不在Firefox中？

到目前为止，我已经使用Safari浏览我的布局。一切都像我想要的那样在Safari中完美呈现，这是一种带有徽标，导航栏，标题图像以及双柱体区域的简单布局。然而，在Firefox中，标题图像和徽标都没有显示，并且身体区域的两列浮动不起作用，而是陷入了一个......我不确定发生了什么，或者哪些类型的问题我会在其他浏览器遇到的，但也许有人能找到什么是错的：布局CSS在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>

来源

2013-07-13 Jen

我能看到HTML？或者是没有'some this'或'some that'的实际CSS？ – hungerstar

看到html代码也会有帮助 – dcodesmith

@Jen请创建一个http://jsfiddle.net –

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

来源

2013-07-13 21:23:16 Dunno

作品！谢谢！！ – Jen

删除像素值之间的空格。

height: 100 px;到height: 100px;

来源

2013-07-13 21:25:09 hungerstar

布局CSS在safari中完美工作，但不在Firefox中？

回答

相关问题