Dziwny problem z paddingiem i białymi spacjami: nowrap w Chrome i IE

Question

Wpadłem na naprawdę dziwny problem. (http://jsfiddle.net/Fq68D/)

HTML

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

CSS

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

W Firefoksie działa jak oczekiwano, tekst wpisuje się w p, i ma wyściółkę,

Choć w Chrome i IE tekst staje z pudełka.

Co jest tego przyczyną? Jakiekolwiek obejścia?

Answer 1

Dodaj display: inline-block; do p element:

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