0

私はこの Web サイトに数日間取り組んできましたが、ほとんどの 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;
}

素敵な Google Chrome: ここに画像の説明を入力

と FireFox: ここに画像の説明を入力

4

2 に答える 2

2

追加

clear: both;

に.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 に答える