एक बटन तत्व की ऊंचाई समान ऊंचाई गुणों के साथ एक भाई इनपुट तत्व से मेल नहीं खाती है?

Question

मैं निम्नलिखित है:

<div style="border:solid 1px gray; height:22px; line-height:22px; display:inline-block;">Div</div> 
<input style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;" type="text"> 
<button style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;">Button</button> 

आप इस jsFiddle में देख सकते हैं, क्यों बटन तत्व 1px बाकी की तुलना में कम है? क्रोम और फ़ायरफ़ॉक्स में।

Answer 1

ब्राउज़र को उन तत्वों के लिए बॉक्स मॉडल लागू करने के तरीके से करना होगा। सीएसएस के लिए http://www.quirksmode.org/css/box.html

आप box-sizing: content-box;, -moz-box-sizing: content-box; जोड़ सकते हैं, -ms-box-sizing: content-box;

यह मजबूर करने के लिए:

div और input दोनों content-box जहां-रूप buttonborder-box

का उपयोग करता है और अधिक जानकारी के लिए यहाँ देखें का उपयोग आयामों की गणना करने के सामग्री-बॉक्स विधि का उपयोग करने के लिए।

संपादित करें - अधिक जानकारी: Why does Firefox use the IE box model for input elements?