css - 引き戸のボタン要素はFirefoxでのみ壊れました

Question

Firefox以外はすべて正常に動作する汎用の引き戸ボタンを作成しようとしています。ボタンのスパン要素は常にFFで2px低くなります。

これが例です

http://jsbin.com/orami3/4

Answer 1

これを試して：

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

（コロン（:)が2倍になっていることに注意してください。）

この場合の余分なパディングは、Firefoxのあいまいなバグが原因です。

（このバグに自分で遭遇したことがありますが、このブログでGoogle検索を介して解決策を見つけました。）

Answer 2

なぜそうなるのかわかりませんが、ここには奇妙なことがあります。Safariにも影響しますが、少し異なります。ボタンスパンに負のマージンを追加すると、FirefoxではSafariよりも半分の距離だけ移動します。したがって、ソリューションは背景画像を相殺しているようです。これをハックする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;      
}

ここでの例：http：//jsbin.com/orami3/9