इनपुट प्रकार = फ़ायरफ़ॉक्स

Question

मैं अपने प्रपत्र बटन शैली की कोशिश कर रहा हूँ और मुझे लगता है कि मैं की तह तक पहुंचने नहीं कर सकते फ़ायरफ़ॉक्स में एक समस्या का सामना कर रहा हूँ में पाठ लंबवत संरेखण प्रस्तुत ...

मैं करना चाहते हैं शैली निश्चित <a /> और <input type="submit" /> रों ही देखने के लिए (मैं एक हॉवर प्रभाव लागू करने के एक रपट-दरवाजे तकनीक का उपयोग कर एक बटन पृष्ठभूमि छवि है,।)

यह सब अच्छा काम करता है, फ़ायरफ़ॉक्स में छोड़कर, इनपुट प्रस्तुत पाठ है यह होना चाहिए उससे थोड़ा नीचे। आईई और सफारी/क्रोम ठीक काम करते हैं।

alt text http://blog.muonlab.com/wp-content/uploads/2009/11/b0rked-buttons.png

किसी को भी किसी भी विचार है?

धन्यवाद

<div class="buttons"> 
    <a href="#" class="button btn-small-grey">&laquo Back</a> 
    <input type="submit" class="button btn-large-green" value="Save changes" /> 
</div> 

.button 
{ 
    cursor: pointer; 
    border: 0; 
    background-color: #fff; 
    color: #fff; 
    font-size: 1.4em; 
    font-weight: bold; 
    outline: 0; 
    font-family: Arial, Verdana, Sans-Serif; 
} 

a.button 
{ 
    display: block; 
    float: left; 
    text-align: center; 
    text-decoration: none; 
    padding: 5px 0 0 0; 
    height: 22px; 
    margin-right: 1em; 
} 

.btn-small-grey 
{ 
    height: 27px; 
    width: 96px; 
    background-position: 0 -81px; 
    background-image: url(/assets/images/buttons/buttons-small.gif); 
} 

.btn-large-green 
{ 
    height: 27px; 
    width: 175px; 
    background-position: 0px -54px; 
    background-image: url(/assets/images/buttons/buttons-large.gif); 
} 

Answer 1

मुझे यह पोस्ट मिला क्योंकि मैंने कुछ महीने पहले इस समस्या का समाधान किया था और जब मैं आज फिर से इसमें भाग गया, तो मुझे याद नहीं आया कि मैंने क्या किया था। अच्छा लगा। मेरे सीएसएस पर पोरिंग के बाद मैं अंततः "फिक्स" स्थित था।मैं क्रेडिट क्योंकि मैं कहीं वेब पर यह पाया नहीं ले जा सकते हैं, लेकिन उम्मीद है कि के रूप में यह मेरे लिए किया गया है कि यह आप के रूप में उपयोगी हो सकता है:

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
} 

मुझे आशा है कि इस मदद करता है।

Answer 2

मैं एक ही समस्या थी और मैं चौड़ाई नहीं बल्कि ऊंचाई फिक्सिंग और मूल्यों के साथ खेलने से हल किया गया है (केवल FF और सफारी के लिए): (ऊपर और नीचे) गद्दी, लाइन-ऊंचाई और यदि आवश्यक हो तो लंबवत-संरेखण को मध्य में सेट करें। हालांकि, यदि आप सभी मानों (यहां तक ​​कि फ़ॉन्ट आकार) को पिक्सेल में सेट करते हैं तो यह सब करना अधिक आसान है।

---

संपादित करें: मुझे लगता है कि, एक क्रॉस-ब्राउज़र समाधान नहीं है कि क्योंकि समस्या ब्राउज़रों के पाठ प्रतिपादन के कारण है। पूरी तरह से समस्या को हल करने के लिए आप टेक्स्ट के साथ पृष्ठभूमि img खींच सकते हैं और उस छवि को लिंक या बटन पर लागू कर सकते हैं। भले ही इस समाधान के साथ आप पहुंच में हार जाएं।

वैकल्पिक रूप से आप प्रत्येक ब्राउज़र के लिए लेआउट को बेहतर बनाने के लिए सशर्त सीएसएस कथन का उपयोग कर सकते हैं।

Answer 3

मुझे हर बार एक ही समस्या है जब मुझे फॉर्म बटन स्टाइल करने की आवश्यकता होती है। क्षमा करें, इस समय काफी व्यस्त है, इसलिए केवल संक्षिप्त विवरण मैं इसे कैसे ठीक करता हूं।

एफएफ टेक्स्ट में आमतौर पर थोड़ी कम होती है, बिल्कुल आपके द्वारा संलग्न छवि पर और इसलिए मैं बस बटन पर "पैडिंग-तल" लागू करता हूं। यह टेक्स्ट को पिक्सल के बटन नंबर पर ले जाता है।

समस्या यह है कि यह आईई में पाठ भी ले जाती है और अब आईई थोड़ा सा दिखता है। इसे ठीक करने के लिए मैं बटन की ऊंचाई के समान मूल्य के साथ एक ही बटन पर "लाइन-ऊंचाई" लागू करता हूं। इससे आईई पूरी तरह से पैडिंग को अनदेखा कर देता है और मध्य में पाठ को सही स्थिति में रखता है।

<input type="submit" value="SEARCH" class="search"/> 

और सीएसएस: नीचे नमूना एचटीएमएल कोड है

.search 
{ 
    background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */ 
    height: 29px; 
    width: 104px; 
    border: 0; 

    /* centering text on button */ 
    line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */ 
    padding-bottom: 2px; /* IE will ignore but works for FF */ 
} 

माफ करना, मैं इसे अपने कोड पर सीधे लागू होता नहीं था, लेकिन मैं इस समय एक सा व्यस्त हूँ, आशा है कि आप विचार आया और यह हालांकि मदद करता है।

ps। आईई 8 में बस चेक किया गया है और सभी उपरोक्त चाल कुछ पिक्सल ऊपर टेक्स्ट करते हैं। तो इसका मतलब है कि पैडिंग टॉप/नीचे के साथ चारों ओर मजाक कर रहा है .. मैं अब अपना धैर्य खो गया हूं और मुझे लगता है कि मैं इसे अब से अलग स्टाइलशीट में डाल दूंगा जब तक कि मुझे कुछ काफी आसान और सार्वभौमिक समाधान नहीं मिल जाता इन सभी

Answer 4

आप बटन को एक अलग तत्व के साथ पूरी तरह से बदलने पर भी विचार कर सकते हैं। एंकर तत्व पूरी तरह से काम करता है। बस 'सबमिट' फ़ंक्शन को इसके 'ऑनक्लिक' ईवेंट में जोड़ें और आपको जाना अच्छा लगेगा। मुझे लगता है कि यह एक बेहतर (और सरल) क्रॉस ब्राउज़र समाधान है।

Answer 5

इनपुट नहीं विभिन्न ब्राउज़र में डब्ल्यू 3 बॉक्स मॉडल सम्मेलन निम्नलिखित प्रारूप एक समान है, जिसे आप शामिल करना चाहते हो सकता है:

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
} 

अन्यथा:

input /*Content follows box model*/ 
{ 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 

    height:24px; 
} 

इसके अलावा फ़ायरफ़ॉक्स (जो शैली ने बताया) के लिए शामिल आप बटन

मैंने इन सभी समाधानों को विभिन्न स्रोतों से एकत्रित किया है, वे क्रेडिट

के लायक हैं