El esquema CSS no se representa correctamente en Firefox

Question

Estoy un poco desconcertado con la forma en que se representa la propiedad de 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).

Agregué un par de capturas de pantalla como referencia.Uno de Firefox:

y el otro de 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>

¿Como puedo resolver esto?

Answer 1

En Firefox, los contornos se dibujan alrededor del box-shadow (no en el interior).
Por lo tanto, tendrás que ofrecerle (usando un truco CSS) una regla adicional: outline-offset: -X (X = longitud de la sombra).

Answer 2

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

Hasta entonces, puede aplicar otra sombra de cuadro al elemento, ya que puede tener varias sombras de cuadro:

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