div की सामग्री अब तब div है जब चौड़ाई 100% पर सेट हो जाती है?

Question

मेरे पास है जिसमें केवल input टेक्स्ट बॉक्स और 100% पर सेट किया गया है। मुझे लगता है कि यह div भरने की अपेक्षा करता है लेकिन इसके बजाय यह थोड़ा लंबा है।

प्रदर्शन कोड:

HTML:

<div class="container"> 
    <input class="content" id="Text1" type="text" /> 
</div> 

सीएसएस:

.container 
{ 
    width: 300px; 
    height: 30px; 
    border: thin solid red; 
} 
.content 
{ 
    width: 100%; 
} 

परिणाम (Firefox):

यह HAP आईई 8, क्रोम, सफारी में पेन भी ... ओवरफ्लो चौड़ाई अलग-अलग ब्राउज़रों में भिन्न दिखती है। मैं सामग्री को div की चौड़ाई को भरने के लिए कैसे बना सकता हूं?

Answer 1

box-sizing: border-box करने के लिए इसे लागू हो एक त्वरित, आसान तरीका यह तय करने के लिए है। http://jsfiddle.net/thirtydot/QkmSk/301/

.content { 
    width: 100%; 
    box-sizing: border-box; 
} 

_{See here एक को भावुक IE7 संगत विधि के लिए:}

यहाँ एक डेमो है।

Answer 2

भी अपने पृष्ठ पर एक सीएसएस रीसेट जोड़ें। इनपुट में कुछ पैडिंग जोड़ा जा सकता है!

Answer 3

आपको पैडिंग, मार्जिन और सीमाओं को रीसेट करने की आवश्यकता है। यदि आप इसे साइटवाइड लागू करना चाहते हैं, तो आप एरिक मेयर की रीसेट सीएसएस का उपयोग कर सकते हैं: http://meyerweb.com/eric/tools/css/reset/

या आप अपना खुद का लिख ​​सकते हैं।

यह will work in all modern browsers, और IE8 +: बस अपने खुद के मानों

Answer 4

जब मैं आपके कोड का उपयोग करता हूं, तो यह फ़ायरफ़ॉक्स पर ठीक दिखाता है। मुझे संदेह है कि आपको विनिर्देश के साथ कोई समस्या है: http://htmldog.com/guides/cssadvanced/specificity/

या आसपास के एचटीएमएल में कोई समस्या है। अर्थात। अनजान टैग

यह सीएसएस और एचटीएमएल को एक सादा फ़ाइल में डालने का प्रयास करें ताकि यह सही ढंग से प्रदर्शित हो सके। यदि ऐसा होता है, तो मैं पैरेंट तत्वों के सीएसएस गुणों को देखने का सुझाव देता हूं।

यदि आपके पास पहले से नहीं है, तो फ़ायरफ़ॉक्स के लिए वेब डेवलपर टूलबार डाउनलोड करें, फिर क्लिक करने योग्य तत्व प्रॉपर्टी डिस्प्ले को सक्षम करने के लिए CTRL + SHIFT + F का उपयोग करें। इससे आपको क्या हो रहा है डीबग करने में मदद मिलेगी।

उम्मीद है कि इससे मदद मिलती है।