填充和空白的奇怪问题：Chrome和IE中的nowrap

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/