इनपुट और चयन अलग-अलग बॉक्स मॉडल का उपयोग क्यों करते हैं?

Question

ऐसा लगता है (कम से कम आईई 8 और फ़ायरफ़ॉक्स 3 में) < इनपुट > तत्वों की चौड़ाई सामग्री को संदर्भित करती है, लेकिन < > तत्वों की चौड़ाई सामग्री + सीमाओं को संदर्भित करती है। मैं स्पष्ट रूप से सीएसएस शैली में चौड़ाई निर्दिष्ट कर रहा हूँ।

क्या सौदा है? मैंने सोचा होगा कि दोनों इनलाइन तत्वों को प्रतिस्थापित कर रहे हैं और समान व्यवहार करेंगे। क्या यह व्यवहार डब्ल्यू 3 सी मानकों के अनुरूप है? क्या यह सभी प्रमुख ब्राउज़रों में इस तरह से काम करता है?

Answer 1

ब्राउज़र W3C से पहले थे इसलिए उन्होंने अपने स्वयं के प्रतिपादन नियमों को परिभाषित किया। फॉर्म नियंत्रण स्टाइल के संबंध में ब्राउज़र कभी भी अनुरूप नहीं होंगे (निकट भविष्य में) क्योंकि डिफ़ॉल्ट ब्राउज़र शैलियों असंगत हैं और विभिन्न नियंत्रणों द्वारा फ़ॉर्म नियंत्रण प्रदान किए जाते हैं।

इस साइट में सूचियों डिफ़ॉल्ट ब्राउज़र शैलियों: http://www.iecss.com/ (आदानों की स्टाइल असंगत है)

Answer 2

विभिन्न बॉक्स आकार के कारण आकार बदलने से अलग आकार का चयन करें। इनपुट में बॉक्स-साइजिंग "कंटेंट-बॉक्स" पर सेट है जबकि चयन में बॉक्स-साइजिंग 'सीमा-बॉक्स' पर सेट है। इनपुट नीचे दिए गए उदाहरण में चयन से अधिक व्यापक हो जाएगा:

<input type="text" name="a" value="a" style="width:100px; border:5px solid red; padding: 10px;" /> 
<select name="b" style="width:100px; border:5px solid red; padding: 10px;" /><option value="b">b</option></select> 

ऐसा इसलिए है क्योंकि निवेश के लिए पूरी चौड़ाई चौड़ाई + गद्दी (बाएं सही +) + सीमा (बाएं + दाएं) और बस चौड़ाई के लिए चयन पूरी चौड़ाई हो जाएगा हो जाएगा (लेकिन आप जानते हैं कि)। दोनों तत्वों को समान तरीके से व्यवहार करने के लिए आपको बॉक्स आकार के मॉडल को बदलना होगा। इनपुट नीचे दिए गए उदाहरण में और चयन बिल्कुल एक ही चौड़ाई * होगा: फ़ायरफ़ॉक्स

के लिए

<input type="text" name="a" value="a" style="width:100px; border:5px solid red; padding: 10px;" /> 
<select name="b" style="box-sizing: content-box; width:100px; border:5px solid red; padding: 10px;" /><option value="b">b</option></select> 

* का उपयोग -moz बॉक्स-आकार के रूप में मुझे पता है इस व्यवहार (IE6 सहित) सभी आधुनिक ब्राउज़रों में संगत है लेकिन मुझे नहीं पता कि यह इस तरह क्यों काम करता है। किसी भी W3 spec को नहीं जानते जहां यह विशेष व्यवहार वर्णित है। note suggesting default styling है लेकिन इसमें केवल साधारण विशेषताओं को शामिल किया गया है - यही कारण है कि डिफ़ॉल्ट सीएसएस रीसेट करना इतना लोकप्रिय है।

Answer 3

मैं एक काम पूरी तरह से सीएसएस पर इस प्रयोग किया है:

input, select 
{ 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
} 

इस के साथ

आप आदानों के व्यवहार के लिए मजबूर है और एक ही होने के लिए चयन करें।