एचटीएमएल <buttons> क्यों सभी आधुनिक ब्राउज़रों में पुराने आईई 5 बॉक्स मॉडल का पालन करता है?

Question

मेरे पास एक बटन और कुछ सीएसएस के साथ एक अजीब समस्या है, मैंने देखा कि यह व्यवहार कर रहा था जैसे कि यह पुराने आईई 5 बॉक्स मॉडल का पालन करता है, जहां ऊंचाई = ऊंचाई + पैडिंग।

कुछ ब्राउज़िंग के बाद मैं this article पर आया जिसने मेरी धारणाओं की पुष्टि की लेकिन यह समझाया कि यह मामला क्यों है।

क्या कोई जानता है कि सभी आधुनिक ब्राउज़र (फ़ायरफ़ॉक्स, क्रोम, आईई 9) इस तरह के बटन तत्वों का इलाज क्यों करते हैं? और क्या किसी को बटन तत्वों को बॉक्स मॉडल का उपयोग करने के लिए कामकाज के बारे में पता है (जहां तक ​​मैं कह सकता हूं) उन ब्राउज़रों में कभी भी अन्य तत्व उपयोग करता है?

Answer 1

मुझे यह भी एहसास नहीं हुआ कि बटन इस तरह से कार्य करते हैं, लेकिन मैं आमतौर पर इनपुट तत्वों का उपयोग नहीं करता हूं और फैशन div समकक्षों का चयन नहीं करता क्योंकि वे शैली के लिए बहुत आसान हैं और सभी ब्राउज़रों में समान दिखते हैं।

button, input[type=button], input[type=submit] 
{ 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
} 

Here's an example on JSFiddle:

एक काम के आसपास बटन पैमाने div तत्वों, content-box को box-sizing विशेषता निर्धारित करने में जो divs के लिए डिफ़ॉल्ट मान है हो सकता है की तरह बनाने के लिए।

Answer 2

<button> को इनलाइन टैग के रूप में माना जाता है, तो यह स्वाभाविक रूप से डब्ल्यू 3 सी बॉक्स मॉडल का उपयोग नहीं करता है।

यह पूरी तरह तार्किक है, लेकिन मैं पूरी तरह से परेशान हूं, लेकिन मैं सहमत हूं। बिंदु अब है: इसे ब्लॉक टैग के रूप में क्यों नहीं माना जाता है?

button { 
 
    width: 100px; 
 
    padding: 0 30px; 
 
} 
 

 
#a { display: inline; } 
 
#b { display: block; } 
 
#c { display: inline; box-sizing: content-box; } 
 
#d { display: block; box-sizing: content-box; }

<button id="a">aaa</button> 
 
<button id="b">bbb</button> 
 
<button id="c">ccc</button> 
 
<button id="d">ddd</button>

Answer 3

इस समय इस सवाल पूछने के बारे में अजीब बात यह है कि जे एस/सीएसएस समुदाय में उच्च अंत लोगों के कई इस बॉक्स मॉडल की बहुत-संगत संस्करण का उपयोग शुरू कर दिया है है , उनके उत्पादन परियोजनाओं में।

box-sizing : border-box अधिकांश आधुनिक ब्राउज़र इनपुट की तरह व्यवहार करेंगे।
देखें: Paul Irish - Border-Box FTW

तत्काल लाभ, ऊपर सब कुछ लाइन बहुत तेजी से नकारात्मक हाशिए साथ खेलने के लिए बिना, जब तक आप वास्तव में गैर fixed/गैर absolute तैनात तत्वों का z- सूचकांक ओवरले करने के लिए करना चाहते हैं सक्षम किया जा रहा है ।