2013-05-09 10 views
6

Mi sono imbattuto in un problema davvero strano. (http://jsfiddle.net/Fq68D/)Problema strano con padding e spazi vuoti: nowrap in Chrome e IE

HTML

<div> 
    <p>Hello World!</p> 
</div> 

CSS

div { 
    display:inline-block; 
} 
p { 
    background-color:#ccc; 
    padding:10%; 
    white-space:nowrap; 
} 

In Firefox funziona come previsto, il testo si inserisce in p, e ha imbottitura,

Mentre in Chrome e IE testo diventa fuori dalla scatola.

enter image description here

che cosa provoca questo? Qualche soluzione alternativa?

+0

Questo ha a che fare con la percentuale di imbottitura. Si prega di consultare http://stackoverflow.com/questions/9320934/quirky-percentage-interpretation-in-webkit – Sablefoste

+0

Se carico il violino, vedo il problema, ma quando faccio clic su run si corregge da solo. – j08691

+0

@ j08691, strano, lo stesso accade quando si ispeziona l'elemento p in chrome, e si disabilita, quindi si riabilita il padding. – Tonik

risposta

9

Aggiungi display: inline-block; al p elemento:

http://jsfiddle.net/Fq68D/1/

+0

Grazie! questo risolve il dimensionamento, ma div è ancora più piccolo di p, e quando aggiungo overflow: nascosto a div, p taglia fuori ... c'è un modo per sistemarlo? L'intero punto di questo codice, è rendere il display div corretto. – Tonik

+0

Quando si cambia '%' su ad esempio l'unità 'px', tutto va bene. Penso che sia ok. Diamo un'occhiata. 'p' ha il 10% di imbottitura. Deve essere calcolato in base all'elemento genitore 'div'. In questo caso il div non ha larghezza. Questa larghezza è basata su larghezza p ma senza riempimento. Spero tu capisca cosa intendo :) – WooCaSh

+0

La mia risposta è stata utile? – WooCaSh

Problemi correlati