Weird issue with padding and whitespace: nowrap in Chrome and IE

Question

I ran into really weird issue. ( 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;
}

In Firefox it works like expected, text fits in p, and has padding,

While in Chrome and IE text gets out of box.

What causes this? Any workarounds?

Answer 1

Add display: inline-block; to p element:

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