親divより大きいネストされたdiv

Question

JavaScriptを使用して作成されたスクロールバーをスキンするのにCSSを使用しています。

.scrollbar-track{ 
 
    background: black; 
 
    height: 10px; 
 
} 
 
    
 
.scrollbar-thumb{ 
 
    cursor: default; 
 
    border: 1px red solid; 
 
    width: 50px; 
 
    padding: 0; 
 
} 
 

 
.scrollbar-thumb-first{ 
 
    display: inline-block; 
 
    background: green; 
 
    width: 5px; 
 
    height: 10px; 
 
} 
 
    
 
.scrollbar-thumb-middle{ 
 
    display: inline-block; 
 
    background: red; 
 
    height: 10px; 
 
    width: 20px; 
 
} 
 
    
 
.scrollbar-thumb-last{ 
 
    display: inline-block; 
 
    background: blue; 
 
    width: 5px; 
 
    height: 10px; 
 
}

<div class="scrollbar"> 
 
    <div class="scrollbar-track" style="width: 970px;"> 
 
     <div class="scrollbar-thumb"> 
 
      <span class="scrollbar-thumb-first"></span> 
 
      <span class="scrollbar-thumb-middle"></span> 
 
      <span class="scrollbar-thumb-last"></span> 
 
     </div> 
 
    </div> 
 
</div>

そして、これはフィドルです：http://jsfiddle.net/w27wM/8/

なぜ親のdivよりも何とか大きな内側のdivがありますか？マージンとパディングが0に設定されていても、問題は残ります。

Answer 1

display: inline-blockをすべてfloat: leftに変更して解決します。

問題はthis questionに関連している可能性がありますが、すべての空白を削除しても問題は解決しませんでした。これは、ノードがjavascriptで作成されている可能性があります。

Answer 2

.scrollbar divには明示的な幅が指定されていないため、親によって与えられた幅のデフォルト= 100％とみなされます。

.scrollbar-trackには、親と親の親の幅を超える970pxの明示的な幅が与えられます。したがって、.scrollbarは、その子の.scrollbar-trackよりも細くなります。

なぜスクロールバートラックを明示的に設定していますが、スクロールバー（親）に対して同じ処理をしないのですか？

Answer 3

それは簡単な問題です。デフォルトでは、行の高さは20ピクセルです。インラインブロック要素は、行の高さを垂直方向に読み取ります。

だから、解決策を、例えば

line-height: 10px; or float: left; 

指定のいずれかである：block`と `フロート：

.scrollbar-thumb span{ 
    line-height: 10px; 
} 

または

.scrollbar-thumb span{ 
    float: left; 
}