से छोटा दिखता है मैंने अभी एक बहुत ही सरल रूप के इस अजीब प्रतिपादन को देखा है।सीएसएस: सबमिट बटन टेक्स्ट इनपुट और टेक्स्टरेरा
यहाँ मेरी मार्कअप/सीएसएस है: http://jsfiddle.net/a9PLM/
आप देख सकते हैं, पाठ फ़ील्ड और बटन शेयर एक ही शैलियों लेकिन उनके आकार काफी अलग है।
ऐसा क्यों होता है?
धन्यवाद!
यह <input type="submit"> और <input type="text">/<textarea> के लिए उपयोग किए जाने वाले बॉक्स मॉडल के कारण अलग है। jsFiddle demo
टेक्स्ट फ़ील्ड पर पैडिंग इसे पक्षों पर अतिरिक्त जगह प्रदान करता है। इनपुट और टेक्स्टरीज़ के पैडिंग को 0
मुझे लगता है कि यह एक ब्राउज़र प्रतिपादन समस्या है ... बटन इनपुट इनपुट से भिन्न रूप से प्रदर्शित किए जा रहे हैं।
ठीक करने के लिए, अपने सीएसएस में जोड़ना
form input[type="submit"]{
width:273px;
}
समस्या यह है कि है प्रपत्र भागों आम तौर पर सामान्य HTML तत्वों की तरह बनाए नहीं कर रहे हैं, और उन्हें स्टाइल हमेशा एक है थोड़ा हिट-या-मिस। मैं इस सटीक आकार की आवश्यकता तरह के मामले से बचने का प्रयास करेंगे, लेकिन यदि आप नहीं कर सकते, तो इस तरह चयनकर्ताओं विभाजित:
form textarea, form input[type=text]
{
width:250px;
padding:10px;
}
form input[type=submit] { width: 270px }
ध्यान दें कि मैं करने के लिए चौड़ाई के लिए 20 पिक्सल (10 एक्स 2) जोड़ा पैडिंग के लिए क्षतिपूर्ति।
मैं: http://www.quirksmode.org/css/box.html
मैं अपने jsFiddle यह काम कर रहा दिखाने के लिए संपादित:
box-sizing: border-box;
-moz-box-sizing: border-box;
आप बॉक्स मॉडल के बारे में अधिक पढ़ सकते हैं: आप बॉक्स मॉडल उन्हें सीएसएस के साथ निर्दिष्ट द्वारा एक ही कर सकते हैं मैंने इस सीएसएस-केवल समाधान का उपयोग किया है जो आईई, एफएफ और क्रोम में काम करता है। असल में, विचार मानक तत्वों की ऊंचाई को मानक बक्से से बड़े मूल्यों पर मैन्युअल रूप से मजबूर करना है। दोनों पाठ और बटन के लिए यह करें:
उदाहरण:
input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; }
input[type="submit"] { height:32px; }