頭在不同broswers看起來不同

Question

我有這個頭在這裏...

.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:info@surfthecurve.ca?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--> 

Answer 1

你需要清除漂浮在那裏。您可以使用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%; 
}