स्लाइडिंग दरवाजा बटन तत्व केवल फ़ायरफ़ॉक्स में तोड़ दिया - सीएसएस, फ़ायरफ़ॉक्स, बटन, स्लाइडिंग-दरवाजे

मैं एक स्लाइडिंग दरवाजा बटन करने की कोशिश कर रहा हूं जिसे सामान्य उद्देश्य में इस्तेमाल किया जा सकता है फ़ायरफ़ॉक्स को छोड़कर सब कुछ ठीक काम करता है। बटन में अवधि तत्व हमेशा एफएफ में 2px कम करता है।

यहाँ उदाहरण है

http://jsbin.com/orami3/4

उत्तर:

उत्तर № 1 के लिए 11

इसे इस्तेमाल करे:

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

(ध्यान दें कि कोलन (:) दोगुना हो गया है, हां।)

इस मामले में अतिरिक्त पैडिंग एक अस्पष्ट फ़ायरफ़ॉक्स बग के कारण होता है।

(इस बग का सामना करने के बाद मुझे समाधान मिला है इस ब्लॉग पर, एक Google खोज के माध्यम से।)


जवाब के लिए 0 № 2

Well, I don"t know why this happens, but there is यहाँ कुछ अजीबता। यह सफारी को भी प्रभावित करता है, और यह थोड़ा अलग है। यदि आप बटन अवधि में नकारात्मक मार्जिन जोड़ते हैं, तो यह सफारी में फ़ायरफ़ॉक्स में आधा दूरी ले जाएगा। इसलिए, समाधान पृष्ठभूमि-छवि को ऑफ़सेट करता है। इसे हैक करने का एक तरीका यहां है:

/*grey button hacks non-IE*/
button.grey span{
background-position: 0 -1px;
}
button.grey:hover span{
background-position: 0 -36px;
}
button.grey:active span{
background-position: 0 -71px;
}

/* IE workaround.  The 9 makes non-IE ignore these styles*/
button.grey span{
background-position: 0 0px9;
}
button.grey:hover span{
background-position: 0 -35px9;
}
button.grey:active span{
background-position: 0 -70px9;
}

यहां उदाहरण: http://jsbin.com/orami3/9


संबंधित सवाल
सबसे लोकप्रिय