barre di scorrimento che si presentano quando non si prevede un problema di altezza riga e di overflow-01

Question

Viene visualizzato un comportamento imprevisto (per me) in cui viene visualizzata una barra di scorrimento verticale. Non capisco quale potrebbe essere il limite dell'altezza del contenitore.

sono in grado di fare questo problema andare via o cambiando il margine del LI: 1 o impostare lineHeight della UL: normale invece di 1.

Qualcuno può spiegare ciò che sta realmente accadendo? Vale a dire quale altezza ho superato che richiede una barra di scorrimento verticale?

Ho creato un semplice JSFIDDLE per illustrare il problema che sto avendo.

codice HTML:

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

codice CSS:

body { 
line-height: 1; 
} 

ul { 
    margin: 0; 
} 

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

Answer 1

io non sono sicuro perché è necessario l'overflow per impostare per l'auto, se si rimuove quindi problema risolto

Se la sezione del contenuto deve essere una certa altezza, quindi impostare l'altezza e la barra di scorrimento apparirà se è necessario (se è necessario l'overflow)

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

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

Answer 2

Questo perché il line-height è impostato su 1, il che significa che la linea-altezza è uguale alla dimensione del font. Ciò fa in modo che il carattere superi leggermente la linea. Devi impostare line-height su un valore superiore all'altezza del testo, come puoi immaginare. Il testo si sta comportando tecnicamente come dovrebbe. L'altezza della scatola è definita dall'altezza delle linee, ma il testo è sempre leggermente più grande delle linee. L'altezza della tua linea non dovrebbe mai essere uguale alla dimensione del tuo font dal punto di vista della leggibilità. Spero che aiuti. So che non ti dice esattamente da dove viene l'altezza, ma credo che tu abbia esplorato con successo più mezzi per combatterlo.