在Firefox中使用内联块进行水平滚动，但在Chrome中不能

Question

我在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无法识别显示：内联块。是否有类似/等效的-moz-inline-block与Chrome相同？如果没有，我如何在两个浏览器上获得相同的水平滚动？

提前致谢。

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

Answer 2

在CSS Property下面使用。

-webkit-backface-visibility: hidden