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 无法识别 display: inline-block。是否有类似/等效于 -moz-inline-block 的东西对 Chrome 有同样的作用？如果没有，我怎样才能在两个浏览器上获得相同的水平滚动？

提前致谢。

4

2 回答 2

1

经过一些实验后解决了。我必须在两者之间添加另一个 div 并将其宽度设置为包含元素的总宽度（考虑边框和填充）。这样就不再需要显示属性，并且一切都在 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 回答
1

在 CSS 属性下方使用。

-webkit-backface-visibility: hidden

于 2015-06-16T12:31:55.710 回答