인라인 블록 컨테이너가 자동 오버플로에서 스크롤 막대를 사용하는 이유는 무엇입니까?

Question

이것은 매우 단순한 경우이다

가

http://jsfiddle.net/8j6rt02h/

<div class="outerContainer"> 
    <div class="innerContainer-inlineBlock"> 
     <div class="content">    
     </div> 
    </div> 
</div> 

CSS : 내부 용기 인라인 블록 디스플레이를 구비하면서

.outerContainer{ 
    width: 100px; 
    height:100px; 
    overflow: auto; 
} 
.innerContainer-inlineBlock{ 
    display: inline-block; 
} 
.content{ 
    background-color: blue; 
    width: 100px; 
    height:100px; 
} 

외장 용기 자동 오버플로를 구비한다. 그러면 콘텐츠 크기가 컨테이너보다 작거나 작은 경우에도 스크롤바가 계속 표시됩니다.

내부 컨테이너에 블록 표시를 사용하면 예상대로 작동합니다.

Chrome과 IE 모두에서이 문제를 겪었습니다.

누구나 조금 설명 할 수 있습니까?

Answer 1

인라인 블록 인 내부 컨테이너는 외부 컨테이너의 하단 가장자리보다 약간 위에 올려 진 기준선에 위치합니다 (descenders의 공간 확보). 외부 컨테이너가 내부 컨테이너와 정확히 동일한 높이이기 때문에 기준선 아래의 영역을 수용 할 수있는 충분한 공간이 없기 때문에 오버플로가 발생합니다.

내부 컨테이너를 블록으로 변경하면 다른 인라인 콘텐츠가 없기 때문에 기준선 전체가 사라집니다.

Answer 2

inline-block 요소에 스크롤 막대가 나타나도록 여백이 있습니다. 그들에 -4px 여백을 설정하면 스크롤바가 표시되지 않습니다.

demo

당신이 그들에 아무런 여유 공간이 없기 때문에 다음 스크롤을 볼 수 없습니다 인라인 블록 대신 플로트를 사용하는 것을 고려하면

.innerContainer-inlineBlock{ 
    display: inline-block; 
    margin: -2px;/*left and right -2-2=-4px*/ 
} 

. demo