スライドドアFirefoxでボタン要素が壊れた

Question

私は一般的な目的で使用できるスライドドアボタンを試しています Firefoxを除いてすべて正常に動作します。 FFのspan要素は常にFFで2px低くなります。ここ

が

http://jsbin.com/orami3/4

Answer 1

この試してみてください（コロン（というマインドを：。が）はい、倍増される）

この場合の余分な埋め込みは、あいまいなFirefoxのバグが原因です。

（このバグを自分で遭遇した私は、Google検索を経由して、解決策at this blogを見つけた。）

Answer 2

例ですまあ、これはなぜ起こるか私は知りませんが、いくつかの奇妙さがここにあります。それはSafariにも影響を与えますが、それはやや異なっています。ボタンスパンにマイナスのマージンを追加すると、SafariよりFirefoxの距離が半分になります。だから、その解決策は背景イメージを相殺するようです。ここではそれをハックするための1つの方法は次のとおりです。ここ

/*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 0px\9; 
} 
button.grey:hover span{ 
    background-position: 0 -35px\9;  
} 
button.grey:active span{ 
    background-position: 0 -70px\9;  
} 

例：

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

：http://jsbin.com/orami3/9