paski przewijania pojawiające się, gdy nie oczekujesz od nich przekroczenia linii i przekroczenia limitu

Question

Otrzymuję niespodziewane zachowanie, w którym pojawia się pionowy pasek przewijania. Nie rozumiem, jakie może być ograniczenie na wysokości kontenera.

jestem w stanie zrobić tego problemu odejść albo przez zmianę marginesu Li: 1 lub ustawić ul za lineheight: normalny zamiast 1.

Może ktoś wyjaśnić, co jest rzeczywiście występujących? To znaczy, jaką wysokość przekroczyłem, która wymaga pionowego paska przewijania?

Stworzyłem bardzo prosty JSFIDDLE, aby zilustrować problem, który mam.

HTML kod:

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

kod CSS:

body { 
line-height: 1; 
} 

ul { 
    margin: 0; 
} 

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

Answer 1

Nie jestem pewien, dlaczego trzeba przepełnienie ustawić na auto, jeśli usunąć to wtedy problem rozwiązany

If sekcja treści musi mieć określoną wysokość, a następnie ustawić wysokość, a pasek przewijania pojawi się, jeśli zajdzie taka potrzeba (jeśli potrzebujesz przepełnienia)

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

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

Answer 2

To dlatego line-height jest ustawiony na 1, co oznacza, że ​​line-height jest taki sam jak rozmiar czcionki. Powoduje to, że czcionka nieco przekracza linię. Musisz ustawić line-height na wartość większą niż wysokość tekstu, jak się domyślasz. Tekst zachowuje się tak, jak powinien. Wysokość pudełka jest określona przez wysokość linii, ale tekst jest zawsze nieco większy niż linie. Twoja wysokość linii nigdy nie powinna być równa wielkości czcionki z punktu widzenia czytelności. Mam nadzieję, że to pomoże. Wiem, że to nie mówi dokładnie, skąd się wznosi, ale uważam, że udało ci się odkryć wiele sposobów walki z nim.