तो मेरे पास एक मूल बटन क्लास है जो साइट पर विभिन्न बटनों पर एक ही स्टाइल लागू करती है।एचटीएमएल एंकर और उसी सीएसएस शैली के साथ इनपुट बटन, लेकिन विभिन्न आयाम
मुझे एक फॉर्म इनपुट डालने और एक दूसरे के बगल में एक एंकर टैग डालना पड़ा, और उनकी ऊंचाई और चौड़ाई अलग है। मैंने प्रत्येक के लिए आंतरिक बटन टेक्स्ट को समान रूप से दिखाने के लिए समान बना दिया है (स्पष्ट रूप से मुझे एक दूसरे के बगल में 2 'जोड़ें' बटन की आवश्यकता नहीं है: पी)
मैं चौड़ाई निर्दिष्ट नहीं करना चाहता, या सामग्री के रूप में सीएसएस में ऊंचाई बदल जाएगी। यहां तक कि फ़ॉन्ट थोड़ा अलग आकार का दिखता है, और बॉक्स मॉडल से ऐसा लगता है कि पैडिंग ठीक है।
मार्कअप
<form id="" method="POST" action="">
<input class="button" type="submit" name="submit" value="Add">
</form>
<a class="button" href="">Add</a>
सीएसएस
.button {
font-family: Arial;
background: linear-gradient(to bottom, #FCB97E 0%, #F07605 100%) repeat scroll 0 0 transparent;
border: 1px solid #F07605;
border-radius: 0.5em 0.5em 0.5em 0.5em;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 13px;
font-weight: bold;
line-height: 13px;
outline: medium none;
padding: 5px 8px !important;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
vertical-align: baseline;
}
संपादित करें: आप फ़ायरबग में देख सकते हैं नीचे यह गद्दी नहीं है, बॉक्स मॉडल के रूप में गद्दी दिखाने प्रत्येक के लिए समान है, इसलिए वास्तविक तत्व के साथ यह कुछ है
कैसे मैं दोनों के ऊपर मेरी जे एस बेला में एक भी CSS वर्ग से एक ही आयाम होने के लिए मिलता है?
जब आप फ़ायरबग या कुछ समान तत्व के साथ तत्व का निरीक्षण करते हैं तो आपको तत्वों पर ब्राउज़र सेट डिफ़ॉल्ट शैलियों भी मिलेंगे। शायद आपको वहां अंतर मिलेगा। – Merec
यह किस ब्राउज़र में हो रहा है? मैं एक अलग मार्जिन को छोड़कर क्रोम में मुद्दों पर नहीं देख रहा हूं। –
क्रोम और एफएफ दोनों ऊंचाई में अंतर दिखा रहे हैं, हालांकि एफएफ बहुत बड़ा अंतर है – Horse