Come rimuovere lo strano bordo dall'ombra in Firefox?

Question

Vai a questa violino in Firefox http://jsfiddle.net/qwbpZ/4/

al passaggio del mouse si vedrà questa linea grigia

Va bene in Google Chrome, ma questo bordo grigio sta comparendo in altri browser. Come posso risolvere questo?

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

Sembra, che non esiste una soluzione perfetta: questo antiialiased pixel tra ombra e border-radius sono appiccicosi come l'inferno.

Quindi, mi si avvicinò con le seguenti due soluzioni:

• Utilizzare un pseudo-elemento in più, che sarebbe alla base del luogo problema: http://jsfiddle.net/kizu/qwbpZ/5/
• aggiungere ombre nere più extra (normale e nel riquadro): http://jsfiddle.net/kizu/qwbpZ/6/ - Ho aggiunto qui due, ma ci sono ancora alcuni pixel visibili, se ne aggiungessi altri due sarebbe quasi ok.

Triste, ma queste non sono soluzioni universali e non sono riuscito a trovare un modo corretto per correggere il bug stesso.

Answer 2

provare questo:

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

Answer 3

Correzione rapida: applicare fondo e lati 1px bordo nero a pulsante.
Pulsante fisso: http://jsfiddle.net/FJGeZ/2/
Nota: la distanza dell'asse y shadow del riquadro è minore di 1 pixel per compensare il margine inferiore di 1 pixel, più l'intervallo interno con margini negativi per sovrapporsi al margine superiore.

isolato bug qui: http://jsfiddle.net/AkZE6/