html - 填充和空格 : nowrap in Chrome and IE 的奇怪问题

Question

我遇到了非常奇怪的问题。 ( 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;
}

在 Firefox 中它像预期的那样工作，文本适合 p，并且有填充，

虽然在 Chrome 和 IE 中，文本不合时宜。

这是什么原因造成的？有什么解决方法吗？

Answer 1

添加 display: inline-block; 到 p 元素:

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