Weird Problem mit Padding und Leerzeichen: Nowrap in Chrome und IE

Ich lief in wirklich seltsame Problem. (http://jsfiddle.net/Fq68D/)Weird Problem mit Padding und Leerzeichen: Nowrap in Chrome und IE

HTML

<div> 
    <p>Hello World!</p> 
</div>

CSS

div { 
    display:inline-block; 
} 
p { 
    background-color:#ccc; 
    padding:10%; 
    white-space:nowrap; 
}

In Firefox es wie erwartet funktioniert, Text in p passt, und hat Polsterung,

Während in Chrome und IE Text bekommt aus der Box.

enter image description here

Was bewirkt das? Irgendwelche Problemumgehungen?

Quelle

2013-05-09 Tonik

Das mit dem Polster Prozentsatz zu tun hat. Bitte sehen Sie http://StackOverflow.com/Questions/9320934/quirky-percentage-interpretation-in-webkit – Sablefoste

Wenn ich deine Geige lade sehe ich das Problem, doch wenn ich auf run klicke, korrigiert es sich. – j08691

@ j08691, seltsam, passiert auch, wenn Sie p-Element in chrome inspizieren, deaktivieren und dann das Padding wieder aktivieren. – Tonik

display: inline-block; zu p Elemente hinzufügen:

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

Quelle

2013-05-09 21:38:32 WooCaSh

Danke! das löst p sizing, aber div ist immer noch kleiner als p, und wenn ich overflow hinzufüge: versteckt in div, schneidet p ab ... gibt es irgendeinen Weg, diesen zu beheben? Der ganze Sinn dieses Codes besteht darin, div display correcty zu machen. – Tonik

Wenn Sie '%' beispielsweise in 'px' ändern, ist alles in Ordnung. Ich glaube, es ist okay. Lass uns darauf schauen. 'p' haben 10% Polsterung. Es muss basierend auf dem Elternelement "div" berechnet werden. In diesem Fall hat div keine Breite. Diese Breite basiert auf p Breite, aber ohne Auffüllen. Ich hoffe du verstehst was ich meine :) – WooCaSh

Ist meine Antwort hilfreich? – WooCaSh

Weird Problem mit Padding und Leerzeichen: Nowrap in Chrome und IE

Antwort

Verwandte Themen