¿Cómo eliminar el extraño borde de la sombra en Firefox?

Question

ver este violín en Firefox http://jsfiddle.net/qwbpZ/4/

En vuelo estacionario verá esta línea gris

Está bien en Google Chrome, pero esto borde gris está apareciendo en otros navegadores. ¿Cómo puedo resolver esto?

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

Parece que no existe una solución perfecta: esta antiialiased píxeles entre la sombra y la frontera de radio son pegajosos como el demonio.

Por lo tanto, se me ocurrió con las siguientes dos soluciones:

• Utilice un pseudo-elemento adicional, que sería subyace en el lugar problema: http://jsfiddle.net/kizu/qwbpZ/5/
• añadir sombras negras más adicionales (normal y recuadro): http://jsfiddle.net/kizu/qwbpZ/6/ - He agregado aquí dos, pero todavía hay algunos píxeles visibles, si agregas otros dos, estaría casi bien.

Triste, pero estas no son soluciones universales y no pude encontrar una manera adecuada de corregir el error en sí.

Answer 2

probar esto:

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

Answer 3

Solución rápida: aplique la parte inferior y los lados 1px borde negro al botón.
Botón fijo: http://jsfiddle.net/FJGeZ/2/
Observe la distancia del eje y de la sombra del cuadro es inferior en 1px para compensar el borde inferior de 1px, más el tramo interior con márgenes negativos para superponer el borde principal.

aislada error aquí: http://jsfiddle.net/AkZE6/