Firefox에서는 인라인 블록을 사용하지만 크롬에서는 작동하지 않는 가로 스크롤

Question

Firefox에서는 가로 스크롤링을 구현했지만 크롬에서는 작동하지 않습니다. 파이어 폭스에서 나는 (A, B, C, D는 div가있는 곳)이 상황이 있습니다

하지만 크롬과 같은 페이지에 액세스 할 때, 이것은 내가 볼 것입니다 :

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과 비슷한/이에 상응하는 항목이 있습니까? 그렇지 않다면 두 브라우저에서 동일한 가로 스크롤링을 어떻게 얻을 수 있습니까? 사전에

감사합니다.

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

Answer 2

USE 아래의 CSS 속성.

-webkit-backface-visibility: hidden