填充和空白的奇怪問題：Chrome和IE中的nowrap

2013-05-09 242 views 6 likes

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

是什麼原因造成的？任何解決方法？

2013-05-09 Tonik

這與填充比例做到。請參閱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元素：

2013-05-09 21:38:32 WooCaSh

謝謝！這解決了大小，但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

相關問題