Các div lồng nhau lớn hơn div cha

Question

Tôi đang sử dụng CSS cho thanh cuộn được tạo bằng 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>

Và đây là fiddle: http://jsfiddle.net/w27wM/8/

Tại sao div bên trong bằng cách nào đó lớn hơn div cha mẹ? Ngay cả với lề và paddings thiết lập là 0, vấn đề vẫn còn.

Answer 1

Sự cố được giải quyết bằng cách thay đổi tất cả display: inline-block thành float: left.

Sự cố có thể liên quan đến this question, nhưng việc xóa tất cả khoảng trắng không khắc phục được sự cố cho tôi. Điều này có thể là do nút được tạo trong javascript.

Answer 2

div .scrollbar không được đưa ra một chiều rộng rõ ràng để nó giả định mặc định = 100% chiều rộng được đưa ra bởi cha mẹ của nó.

Đường theo dõi .scrollbar được cung cấp chiều rộng rõ ràng là 970px vượt quá chiều rộng của bố mẹ và cha mẹ của cha mẹ. Vì vậy, .scrollbar kết thúc mỏng hơn con rộng .scrollbar-track.

Tại sao bạn đặt thanh cuộn theo dõi một cách rõ ràng nhưng không thực hiện tương tự cho thanh công cụ .scrollbar (cấp độ gốc)?

Answer 3

Vấn đề đơn giản của nó. Theo mặc định, chiều cao dòng span là 20px. Phần tử khối nội tuyến đọc chiều cao dòng để căn chỉnh theo chiều dọc.

Vì vậy, giải pháp là một trong hai định

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

Ví dụ:

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

hoặc

.scrollbar-thumb span{ 
    float: left; 
}