Esquema CSS que no se representa correctamente en Firefox

Question

Estoy un poco desconcertado con la forma en que se renderiza la propiedad del esquema CSS en Firefox 7 o inferior. Claramente tiene un problema en alguna parte, pero simplemente no puedo encontrarlo.

Funciona bien en todos los demás navegadores principales (Opera, Chrome, IE, Safari).

He agregado un par de capturas de pantalla para referencia. Uno de Firefox:

y el otro desde Chrome:

Aquí está el CSS:

form#commentform input:focus { outline: 2px outset #717377 } 

Aquí está XHTML:

<form id="commentform"> 
     <div> 
     <label for="name"> 
      <strong> 
      Nom 
      <span id="sname"></span> 
      </strong> 
     </label> 
     <input type="text" tabindex="1" id="name" name="name" class="textbox" /> 
     </div> 
... 
</form> 

¿Cómo puedo resolver esto?

Answer 1

En los contornos de Firefox se dibujan alrededor del box-shadow (no adentro).
Así que tendrá que servirlo (utilizando un css hack) una regla adicional: outline-offset: -X (X = shadow length).

Answer 2

Este error se solucionará con Firefox 30: https://bugzilla.mozilla.org/show_bug.cgi?id=480888#c109.

Hasta entonces se podría aplicar otra caja-sombra al elemento, ya que puede tener múltiples cajones-sombras:

.element { 
    box-shadow: your values old box-shadow, 0 0 0 2px #717377; 
}