html - 标题在不同的浏览器中看起来不同

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;
}

在 google chrome 中看起来不错，但是在 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

你需要清除那里的 float 。您可以使用 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%;
}