头在不同broswers看起来不同

我有这个头在这里...头在不同broswers看起来不同

.header { 
    background-color: #FFFFFF; 
    padding-left: 16px; 
    width: 920px; 
} 

.logo { 
    background-color: #FFFFFF; 
    float: left; 
    padding-left: 10px; 
    padding-right: 20px; 
    width: 500px; 
} 

.phoneNumber { 
    background-color: #FFFFFF; 
    color: #44BAD2; 
    float: left; 
    font-size: 22px; 
    height: 94px; 
    line-height: 95px; 
    width: 155px; 
} 

.social { 
    background-color: #FFFFFF; 
    float: left; 
    font-size: 18px; 
    height: 69px; 
    padding-left: 10px; 
    padding-top: 25px; 
    width: 190px; 
} 

.social ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0 0 0 15px; 
} 

.social li { 
    float: left; 
}

谷歌浏览器，它看起来不错，但在Firefox，在左侧和右侧都太短了，你可以在http://www.surfthecurve.ca看到这

这里也是HTML

<div class="header"> 

<div class="social"> 
<ul> 
<li class="facebook"> 
<a target="_blank" href="http://www.facebook.com/SurfTheCurve"></a> 
</li> 
<li class="twitter"> 
<a target="_blank" href="https://twitter.com/SurfCurveTutor"></a> 
</li> 
<li class="email"> 
<a target="_blank" href="mailto:[email protected]?subject=Website Enquiry"></a> 
</li> 
</ul> 
</div><!--social--> 

<div class="logo"> 
<a href="http://surfthecurve.ca/"><img src="http://surfthecurve.ca/wp-content/themes/twentyeleven/images/logo.jpg" width="500" border="0" /></a> 
</div><!--logo--> 

<div class="phoneNumber"> 
647.390.3070 
</div><!--phoneNumber--> 


</div><!--header-->

来源

2012-10-02 user1269625

尝试第一固定这些[验证错误]（http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fsurfthecurve.ca%2F）。这往往是不一致的来源。如果这没有帮助你发现你的问题给我们一个更新。 – noel

在我的Chrome和Firefox上看起来完全一样吗？ – geekman

你需要清除漂浮在那里。您可以使用clear：both或使用clearfix方法。

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
}

来源

2012-10-02 19:18:26

Ummm没有出现工作，我添加了你发布的代码没有工作....我做任何事情你张贴的代码？ – user1269625

将clearfix代码添加到底部的CSS。将class =“header”修改为class =“header clearfix”。 –

感谢芝诺它工作:) – user1269625

头在不同broswers看起来不同

回答

相关问题