फ़ायरफ़ॉक्स में अतिरिक्त बटन रिक्ति / गद्दी निकालें

Question

इस कोड का उदाहरण देखें: http://jsfiddle.net/Z2BMK/

क्रोम / IE8 इस तरह दिखते हैं

फ़ायरफ़ॉक्स इस तरह दिखता है

मेरा CSS है

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

मैं बटन को दोनों ब्राउज़रों में समान बनाने के लिए कोड नमूना कैसे बदल सकता हूं? मैं जावास्क्रिप्ट आधारित हाइपरलिंक्स का उपयोग नहीं करना चाहता क्योंकि वे कीबोर्ड पर स्पेस बार के साथ काम नहीं करते हैं और इसके लिए एक hrefयूआरएल होना चाहिए जो चीजों को संभालने का एक साफ तरीका नहीं है।

मेरा समाधान, फ़ायरफ़ॉक्स 13 के बाद से

button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }

Comments

आपने क्यों जोड़ा margin: -1px? क्या यह किसी तरह से जुड़ा है border: 2px?

— दान

मेरा संपादन देखें। border-widthका -moz-focus-innerथा 1pxडिफ़ॉल्ट रूप से, इसलिए लेखन border-widthकोड में अनावश्यक है, लेकिन यह इसे और अधिक स्पष्ट क्या चल रहा है बनाता है। यह संभव है कि यह भविष्य में प्रूफिंग में भी मदद कर सकता है। आपके प्रश्न का उत्तर देने के लिए, border-widthफ़ायरफ़ॉक्स अंतर का कारण था, और जोड़ना margin: -1pxवह समाधान है जो मेरे पिछले समाधान की तुलना में अधिक संगत है।

— ब्रायन फील्ड

मुझे लगता है कि स्वीकृत उत्तर दृष्टिगत समकक्ष है, लेकिन आपके समाधान से बेहतर है। स्वीकृत उत्तर एफएफ द्वारा जोड़े गए सामान को हटा देता है, और चीजों को सभी ब्राउज़रों में उसी तरह प्रस्तुत करता है। आपका समाधान FF द्वारा उसके स्थान पर जोड़ा गया एक अतिरिक्त बॉर्डर छोड़ देता है, और दो पिक्सेल बॉर्डर के एक पिक्सेल का उपयोग करके छुपाता है margin: -1px। यह अधूरा है। यह टूट जाता है अगर: 1) इंजन प्रदान करने में एक बग दिखाई देता है (जो होता है), 2) बॉर्डर्स को अलग-अलग रंग मिलता है, 3) आप ज़ूम इन करते हैं। अपने समाधान के साथ संभावित समस्याओं को प्रदर्शित करने के लिए, मैंने एक फिडल तैयार किया है: jsfiddle.net/Z2BMK / ४५५ । कृपया ज़ूम इन करें और एक लाल बॉर्डर दिखाई दें।

— दान

आपके उत्तर का एकमात्र फायदा मैं देख सकता हूं कि FF की "बिंदीदार रूपरेखा को संरक्षित किया जा रहा है जब बटन सक्रिय है" कार्यक्षमता

— Dan

हाँ, यह वही है जो मेरे समाधान को बेहतर बनाता है। ऐसा कुछ होना चाहिए जो उपयोगकर्ता को बताता है कि उनका कीबोर्ड कहाँ केंद्रित है।

— ब्रायन फील्ड

Answer 1

इसे जोड़ो:

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

http://jsfiddle.net/thirtydot/Z2BMK/1/

borderबटन को दोनों ब्राउज़रों में समान दिखने के लिए ऊपर का नियम शामिल करना आवश्यक है, लेकिन जब यह बटन activeफ़ायरफ़ॉक्स में होता है, तो यह बिंदीदार रूपरेखा को भी हटा देता है । डेवलपर्स के बहुत सारे इस बिंदीदार रूपरेखा से छुटकारा पा लेते हैं, वैकल्पिक रूप से इसे कुछ अधिक नेत्रहीन रूप से प्रतिस्थापित करते हैं।

Comments

फ़ायरफ़ॉक्स में क्रोम-स्टाइल फोकस चमक का उपयोग करने के लिए उपयोग करें button{background:/*Something here*/} button:focus{-moz-box-shadow:0 0px 3px #C80;}। यह बिंदीदार रेखा नहीं होने के लिए क्षतिपूर्ति करता है और उस ब्राउज़र की संगति देता है जो मैं था।

— ब्रायन फील्ड

यह वही है जो मुझे चाहिए था। धन्यवाद!

— हाबिल

इनपुट तत्वों पर इसे ठीक करने के लिए एसेफिनinput[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner

— स्टीफन

बहुत बढ़िया! धन्यवाद! इससे मदद मिली!

— SoWeLie

@Stefan jsfiddle.net/LjhQ5/1 यह सही ढंग से काम कर रहा है ( fileसीएसएस को छोड़कर ) लगता है। क्षमा करें, जिस पृष्ठ पर मैं इसे करने की कोशिश कर रहा था, उस पर सीएसएस विवादित रहा होगा। धन्यवाद।

— स्पेयरबाइट्स

Answer 2

इनपुट तत्वों पर इसे ठीक करने के लिए भी जोड़ें

input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner

एकदम सही है!

Comments

क्या आपको इस समाधान की ब्राउज़र संगतता का कोई ज्ञान है?

— ब्रायन फील्ड

क्या input[type="file"] > input[type="button"]::-moz-focus-innerआप पहले से ही जोड़ नहीं कर रहे हैं input[type="button"]::-moz-focus-inner, या यह कि आपका अनुभव नहीं है? क्या तुम जानते हो?

— ब्रायन फील्ड

@GeorgeBailey: ब्राउज़र संगतता फ़ायरफ़ॉक्स 3+ है, यह कोड किसी अन्य ब्राउज़र को प्रभावित नहीं करता है।

— दान

@GeorgeBailey मुझे लगता है कि यह उत्तर इस टिप्पणी की प्रतिक्रिया के रूप में था ।

— WynandB