इनपुट क्षेत्र Chrome और Firefox अलग

Question

चलता यहाँ fiddle

मैं क्रोम में परीक्षण किया है में उदाहरण है, यह ठीक से पता चलता लेकिन जब फ़ायरफ़ॉक्स में, इनपुट बॉक्स बड़ा है उम्मीद से।

इसका कारण क्या है? इस समस्या को हल करने के लिए कोई समाधान?

<div class="form-wrapper"> 

<input type="search" name="Ofsearch" placeholder="Search here..." value=""> 
<button id="searchButton" type="submit">Search</button> 

</div> 

सीएसएस:

.form-wrapper { 
    height: 80px; 
    background: #555; 
    color: #FFF; 
    clear: both; 
    } 

.form-wrapper input { 
background-color: white; 
border-radius: 10px; 
border: 5px solid #E5E4E2; 
margin: 2px; 
height: 40px; 
vertical-align: middle; 
padding: 20px; 
margin-top: 15px; 
width: 85%; 
} 

.form-wrapper input { 
background-color: white; 
border-radius: 10px; 
border: 5px solid #E5E4E2; 
margin: 2px; 
height: 40px; 
vertical-align: middle; 
padding: 20px; 
margin-top: 15px; 
width: 85%; 
} 
.form-wrapper button { 
overflow: visible; 
position: absolute; 
float: right; 
border: 0; 
padding: 0; 
cursor: pointer; 
height: 40px; 
width: 110px; 
color: #FFFFFF; 
text-transform: uppercase; 
background: #8E8CC2; 
border-radius: 0 3px 3px 0; 
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); 
margin: 20px -118px; 
} 

आप उदाहरण से देख सकते हैं, जब क्रोम और एफएफ में, वे विभिन्न आकार से पता चलता

यहाँ html फ़ाइल है।

जब मैं इस समस्या की जांच करता हूं, मुझे पैडिंग मिलती है: 20px .form-wrapper input {} में इस समस्या का कारण बन गया है। हालांकि, जब मैं इसे हटा देता हूं, एफएफ ठीक दिखाता है, लेकिन इनपुट क्षेत्र क्रोम में छोटा हो जाता है। बस सोच रहा है, इसे किसी भी ब्राउज़र में प्रदर्शित करने के लिए किसी भी तरह से।

Answer 1

एक अंतर है क्योंकि फ़ायरफ़ॉक्स box-sizing: content-boxtype="search" इनपुट पर उपयोग करता है, जबकि क्रोम border-box का उपयोग करता है।

.form-wrapper input { 
    box-sizing: border-box; 
} 

http://jsfiddle.net/J8dSN/12/

Answer 2

मुझे लगता है कि यह शायद आपके प्रश्न का उत्तर देगा: Form padding differences in Firefox and Opera/Chrome/IE

विभिन्न ब्राउज़र और विभिन्न शुरुआती बिंदु से गद्दी जैसी विशेषताओं के सीमाओं संभाल