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来解决问题。

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

Answer 2

.scrollbar div没有明确的宽度，因此它假定默认值=其父级给出的宽度的100％。

.scrollbar-track的显式宽度为970px，超出了父级和父级父级的宽度。因此，.scrollbar最终比其宽子.scrollbar-track更薄。

为什么要显式设置滚动条轨道但不对.scrollbar（父级）执行相同操作？

Answer 3

这是一个简单的问题。默认情况下，span line-height为20px。内联块元素读取line-height到vertical-align。

所以解决方案是指定

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

例如：

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

或

.scrollbar-thumb span{
   float: left;
}

嵌套div比父div大

3 个答案: