Firefoxのシャドウから奇妙な境界線を削除するにはどうすればいいですか？

Question

は、この灰色の線

それはGoogle Chromeで大丈夫ですが、このグレーの境界線が他のブラウザに表示されているが表示されますホバー上のFirefox http://jsfiddle.net/qwbpZ/4/

でこのフィドルを参照してください。 どうすればこの問題を解決できますか？

CSS

a, a:visited {color:#fff} 

.btn { 
    display: inline-block; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow: 0 9px 0 #000000, 0 13px 0 rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 0 9px 0 #000000, 0 13px 0 rgba(0, 0, 0, 0.1); 
    box-shadow: 0 9px 0 #000000, 0 13px 0 rgba(0, 0, 0, 0.1); 
    -webkit-transition: -webkit-box-shadow .2s ease-in-out; 
    -moz-transition: -moz-box-shadow .2s ease-in-out; 
    -o-transition: -o-box-shadow .2s ease-in-out; 
    transition: box-shadow .2s ease-in-out; 
    padding: 0px; 
     background: black; /* see ? */ 
} 

.btn span { 
    display: inline-block; 
    padding: 22px 22px 11px; 
    font-family: Arial, sans-serif; 
    line-height: 1; 
    text-shadow: 0 -1px 1px rgba(19,65,88,.8); 
    background: #2e2e2e; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15); 
    -moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15); 
    box-shadow: inset 0 -1px 1px rgba(255,255,255,.15); 
    -webkit-transition: -webkit-transform .2s ease-in-out; 
    -moz-transition: -moz-transform .2s ease-in-out; 
    -o-transition: -o-transform .2s ease-in-out; 
    transition: transform .2s ease-in-out; 
    color: #FFF; 
     font-size: 32px; 
     border: 0 
} 

.btn:hover { 
    -webkit-box-shadow: 0 8px 0 #000, 
    0 12px 10px rgba(0,0,0,.3); 
    -moz-box-shadow: 0 8px 0 #000, 
    0 12px 10px rgba(0,0,0,.3); 
    box-shadow: 0 8px 0 #000, 
    0 12px 10px rgba(0,0,0,.3); 
} 

.btn:hover span { 
    -webkit-transform: translate(0, -4px); 
    -moz-transform: translate(0, -4px); 
    -o-transform: translate(0, -4px); 
    transform: translate(0, -4px); 
} 

.btn:active { 
    -webkit-box-shadow: 0 8px 0 #000, 
    0 12px 10px rgba(0,0,0,.3); 
    -moz-box-shadow: 0 8px 0 #000, 
    0 12px 10px rgba(0,0,0,.3); 
    box-shadow: 0 8px 0 #000, 
    0 12px 10px rgba(0,0,0,.3); 
    -webkit-transition: -webkit-box-shadow .2s ease-in-out; 
    -moz-transition: -moz-box-shadow .2s ease-in-out; 
    -o-transition: -o-box-shadow .2s ease-in-out; 
    transition: box-shadow .2s ease-in-out; 
} 
.btn:active span { 



    -webkit-transform: translate(0, 0px); 
    -moz-transform: translate(0, 0px); 
    -o-transform: translate(0, 0px); 
    transform: translate(0, 0px); 
} 

Answer 1

完璧な解決策がないこと、そうです：影との国境半径の間のこのantiialiasedピクセルは地獄のように粘着性があります。

だから、私は、次の2つの解決策を思い付いた：

• 問題の場所を下敷きであろうと、余分な擬似要素を使用します。http://jsfiddle.net/kizu/qwbpZ/5/
• は、より多くの余分な黒い影（ノーマルとインセット）を追加します。 http://jsfiddle.net/kizu/qwbpZ/6/ - ここで2つ追加しましたが、まだいくつかのピクセルが表示されています。もう2つ追加するとほぼOKです。

悲しいものですが、これらは普遍的な解決策ではなく、バグ自体を修正する適切な方法を見つけることができませんでした。

Answer 2

はこれを試してみてください。

-moz-background-clip: padding; 
-webkit-background-clip: padding-box; 
background-clip: padding-box; 

Answer 3

クイックフィックス：ボトムとサイドを1px黒色の枠線をボタンに適用します。
固定ボタン：http://jsfiddle.net/FJGeZ/2/
注意ボックスシャドーのy軸の距離は、1pxのボトムボーダーを補うために1pxより小さく、親のボーダーと重なるようにマイナスマージンを持つ内側のスパンです。ここ

孤立バグ：http://jsfiddle.net/AkZE6/