2013-05-09 9 views
6

में अब्रैप मैं वास्तव में अजीब मुद्दा में भाग गया। (http://jsfiddle.net/Fq68D/)पैडिंग और व्हाइटस्पेस के साथ अजीब समस्या: क्रोम और आईई

एचटीएमएल

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

सीएसएस

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

Firefox में यह काम करता है की तरह उम्मीद, पाठ पी में फिट बैठता है, और गद्दी है,

जबकि क्रोम और IE में पाठ हो जाता है लीक से हटकर।

enter image description here

यह क्या कारण हैं? कोई कामकाज?

+0

इस गद्दी प्रतिशत से कोई लेना देना नहीं है। कृपया http://stackoverflow.com/questions/9320934/quirky-percentage-interpretation-in-webkit – Sablefoste

+0

यदि मैं अपना पहेली लोड करता हूं तो मुझे समस्या दिखाई देती है, फिर भी जब मैं रन क्लिक करता हूं तो यह स्वयं को सुधारता है। – j08691

+0

@ j08691, अजीब, ऐसा तब होता है जब आप क्रोम में पी तत्व का निरीक्षण करते हैं, और अक्षम करते हैं, फिर पैडिंग को पुनः सक्षम करें। – Tonik

उत्तर

9

p तत्व को display: inline-block; जोड़ें:

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

+0

धन्यवाद! यह पी आकार का हल करता है, लेकिन div अभी भी पी से छोटा है, और जब मैं ओवरफ्लो जोड़ता हूं: div से छुपा, पी कट ऑफ ... क्या इसे ठीक करने का कोई तरीका है? इस कोड का पूरा बिंदु, div प्रदर्शन को सही बनाने के लिए है। – Tonik

+0

जब आप '%' को उदाहरण के लिए 'px' इकाई बदलते हैं तो सब ठीक है। मेरे अनुसार यह ठीक है। चलो इसे देखो। 'पी' में 10% पैडिंग है। इसे मूल तत्व 'div' के आधार पर गणना की आवश्यकता है। इस मामले में div की चौड़ाई नहीं है। यह चौड़ाई पी चौड़ाई पर आधारित है लेकिन बिना पैडिंग के। मुझे उम्मीद है कि आप समझते हैं कि मेरा क्या मतलब है :) – WooCaSh

+0

क्या मेरा उत्तर सहायक था? – WooCaSh

संबंधित मुद्दे