嵌套div比父div大

Question

我使用CSS来设置使用JavaScript创建的滚动条.

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

这个问题可能与这个问题有关，但删除所有空格并没有为我解决问题。这可能是由于节点是在 javascript 中创建的。