thanh cuộn hiển thị khi không mong đợi chúng có chiều cao dòng và sự cố tràn-y

Question

Tôi nhận được hành vi không mong muốn (đối với tôi) khi thanh cuộn dọc hiển thị. Tôi không hiểu những gì các ràng buộc về chiều cao của container có thể được.

tôi có thể làm cho vấn đề này đi bởi một trong hai thay đổi lề của LI: 1 hoặc thiết lập lineheight của UL: bình thường thay vì 1.

bất cứ ai có thể giải thích những gì đang thực sự xảy ra? Đó là để nói những gì chiều cao đã vượt quá mà đòi hỏi một thanh cuộn dọc?

Tôi đã tạo JSFIDDLE rất đơn giản để minh họa sự cố tôi đang gặp phải.

HTML code:

<div class="content-section" > 
    <ul > 
    <li>cheese</li> 
    <li>crackers</li> 
    </ul> 
</div> 

mã CSS:

body { 
line-height: 1; 
} 

ul { 
    margin: 0; 
} 

.content-section { 
     overflow-y: auto; 
} 

Answer 1

Tôi không chắc chắn lý do tại sao bạn cần phải tràn để thiết lập để tự động, nếu bạn gỡ bỏ nó sau đó vấn đề giải quyết

Nếu phần nội dung cần phải có chiều cao nhất định, sau đó đặt chiều cao và thanh cuộn sẽ xuất hiện nếu cần (nếu bạn cần tràn)

http://jsfiddle.net/pGuHG/2/

.content-section { 
    overflow-y: auto; 
    height: 100px; 
} 

Answer 2

Điều này là do line-height của bạn được thiết lập để 1, có nghĩa là line-height là giống như font-size. Điều này làm cho phông chữ hơi tràn dòng. Bạn cần đặt line-height thành giá trị lớn hơn chiều cao của văn bản, như bạn có thể đã đoán. Các văn bản là kỹ thuật hành xử như nó phải. Chiều cao của hộp được xác định bởi chiều cao của các dòng, nhưng văn bản là bao giờ nên lớn hơn một chút so với các dòng. Chiều cao dòng của bạn sẽ không bao giờ bằng kích thước phông chữ của bạn từ một quan điểm dễ đọc. Tôi hi vọng cái này giúp được. Tôi biết nó không chính xác cho bạn biết chiều cao đến từ đâu, nhưng tôi tin rằng bạn đã khám phá thành công nhiều phương tiện chống lại nó.