跨浏览器问题？

Question

我已经在这个网站上工作了几天，直到我做了大多数网络开发人员所担心的事情，用其他浏览器查看网站，例如IE和Firefox。出于某种原因，Firefox中的徽标自动收录器不会像在谷歌浏览器中那样被丢弃。 Here is the website。我试着自己解决它，查看我的源代码，但没有发现我做错了。什么可能导致Firefox中的这个问题？

这是我的CSS：

.list_carousel {
    background-color: #FFF;
    margin: 0 0 30px 60px;
    width: 360px;
}
.list_carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align:middle;
}
.list_carousel li {
    font-size: 40px;
    color: #999;
    text-align: center;
    vertical-align:middle;
    background-color: #FFF;
    width: 50px;
    height: 75px;
    line-height:75px;
    padding: 0;
    margin:6px;
    float: left; 
}
.list_carousel li img{
    vertical-align: middle;
    display:inline-block;
    opacity: 0.8;
}
.list_carousel li img:hover{
    vertical-align: middle;
    display:inline-block;
    opacity: 1;
}
.list_carousel.responsive {
    width: auto;
    margin-left: 0;
}
.clearfix {
    float: none;
    clear: both;
}

Nice Google Chrome：

和FireFox：

Answer 1

添加

clear: both;

到.list_carousel，即可修复它。

Answer 2

如果Container内的所有元素都是floated，那么容器将没有任何高度。

将课程clearfix添加到<div class="LogoContainer"

.clearfix {
  *zoom: 1;
}

.clearfix:before , .clearfix:after{
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after{
    clear: both;
}

这应解决所有浏览器的问题。