0

我已经在这个网站上工作了几天，直到我做了大多数 Web 开发人员害怕的事情，使用其他浏览器（例如 IE 和 Firefox）查看该网站。出于某种原因，Firefox 中的徽标代码不会像在 Google Chrome 中那样被下拉。这是网站。我试图自己修复它，查看我的源代码，但没有发现我做错了什么。什么可能导致 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;
}

不错的谷歌浏览器： 在此处输入图像描述

和火狐： 在此处输入图像描述

4

2 回答 2

2

添加

clear: both;

to .list_carousel，这将解决它。

于 2013-07-21T02:46:20.873 回答
1

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

将类添加clearfix到<div class="LogoContainer"

.clearfix {
  *zoom: 1;
}

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

.clearfix:after{
    clear: both;
}

这应该可以解决所有浏览器上的问题。

于 2013-07-21T02:46:07.583 回答