2013-05-09 236 views
6

我遇到了很奇怪的问题。 (http://jsfiddle.net/Fq68D/填充和空白的奇怪问题: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

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

+0

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

+0

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

+0

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

回答

9

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

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

+0

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

+0

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

+0

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