使用inline-block在Firefox中进行水平滚动，但在Chrome中不能 [英] Horizontal scrolling with inline-block working in Firefox but not in Chrome

问题描述

我在Firefox中实现了水平滚动，但在Chrome中无法正常工作。在Firefox中，我有这种情况（其中A，B，C，D是div）：

但是当使用Chrome访问同一页面时，我看到的是：

divs结构如下：

 < 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。有什么类似/等同于-moz-inline-block的东西对Chrome来说是一样的吗？

如果没有，我可以在两个浏览器上获得相同的水平滚动吗？

< >解决方案

在一些实验后解决了。我不得不在之间添加另一个div，并将其宽度设置为包含的元素的总宽度（考虑边框和paddings）。这样，不再需要显示属性，并且在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; 
} 
  

I have implemented horizontal scrolling in Firefox, but it's not working in Chrome. In Firefox I have this situation (where A, B, C, D are divs):

but when accessing the same page with Chrome, this is what I see:

the divs are structured like this:

<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>

and the 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;
}

Apparently, Chrome is not recognizing the display: inline-block. Is there something similar/equivalent to -moz-inline-block that does the same for Chrome? If not, how can I obtain the same horizontal scrolling on the two browsers?

Thanks in advance.

解决方案

Solved it after some experimenting. I had to add another div in between and set its width to the total width of the contained elements (considering borders and paddings). This way the display property is no longer needed and everything works in both Firefox and 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;
}

这篇关于使用inline-block在Firefox中进行水平滚动，但在Chrome中不能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！