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

问题描述：

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文字得到开箱即用。

enter image description here

是什么原因造成的？任何解决方法？

这与填充比例做到。请参阅http://stackoverflow.com/questions/9320934/quirky-percentage-interpretation-in-webkit – Sablefoste 2013-05-09 21:30:38

如果我加载你的小提琴我看到的问题，但当我点击运行它纠正自己。 – j08691 2013-05-09 21:36:19

@ j08691，很奇怪，当你在chrome中检查p元素时会发生同样的情况，并禁用，然后重新启用填充。 – Tonik 2013-05-09 21:56:08

答

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

谢谢！这解决了大小，但div仍然小于p，并且当我添加overflow时：隐藏到div，p切断......有什么方法可以修复这个问题吗？此代码的全部内容是使div显示正确。 – Tonik 2013-05-09 21:53:07

当您将'％'更改为例如'px'单位时，则一切正常。我认为没关系。让我们看看它。 'p'有10％的填充。它需要根据父元素'div'进行计算。在这种情况下，div没有宽度。此宽度基于p宽度，但没有填充。我希望你明白我的意思:) – WooCaSh 2013-05-09 22:10:01

我的回答有帮助吗？ – WooCaSh 2013-05-10 17:55:40