3

Firefox で水平スクロールを実装しましたが、Chrome では機能しません。Firefox では、次の状況があります (A、B、C、D は div です)。

ファイアフォックス

しかし、Chrome で同じページにアクセスすると、次のように表示されます。

クロム

div は次のように構成されています。

<div class="news-list-container">
    <div class="news-list-item">A</div>
    <div class="news-list-item">B</div>
    <div class="news-list-item">C</div>
    <div class="news-list-item">D</div>
    <div class="news-list-item">E</div>
    <div class="news-list-item">F</div>
</div>

そしてCSS：

.news-list-container {
    display: inline-block;
    display: -moz-inline-box;
    height: 187px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 700px;
}

.news-list-item {
    border: 1px solid #E5E5E5;
    float: left;
    height: 175px;
    padding: 5px;
    width: 184px;
}

どうやら、Chrome はディスプレイを認識していません: inline-block. Chrome で同じことを行う -moz-inline-block に似た/同等のものはありますか? そうでない場合、2 つのブラウザーで同じ水平スクロールを取得するにはどうすればよいですか?

前もって感謝します。

4

2 に答える 2

1

いくつかの実験の後、それを解決しました。間に別の div を追加し、その幅を含まれる要素の合計幅に設定する必要がありました (ボーダーとパディングを考慮して)。この方法では、displayプロパティは不要になり、すべてが Firefox と Chrome の両方で機能します。

<div class="news-list-container">
  <div id=container>
    <div class="news-list-item">A</div>
    <div class="news-list-item">B</div>
    <div class="news-list-item">C</div>
    <div class="news-list-item">D</div>
    <div class="news-list-item">E</div>
    <div class="news-list-item">F</div>
  </div>
</div>

.news-list-container {
    overflow-x: auto;
    overflow-y: hidden;
}

#container {
    height: 187px;
    width: 1176px;
}

.news-list-item {
    border: 1px solid #E5E5E5;
    float: left;
    height: 175px;
    padding: 5px;
    width: 184px;
}
于 2012-06-26T15:37:31.530 に答える