Il contorno CSS non viene visualizzato correttamente in Firefox

Question

Sono un po 'sconcertato dal modo in cui la proprietà del contorno CSS viene visualizzata su Firefox 7 o versioni precedenti. C'è chiaramente un problema da qualche parte, ma non riesco a trovarlo.

Funziona bene su tutti gli altri browser principali (Opera, Chrome, IE, Safari).

Ho aggiunto un paio di schermate per riferimento. Uno da Firefox:

e l'altro da Chrome:

Ecco il CSS:

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

Ecco 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> 

Come posso risolvere questo?

Answer 1

Su Firefox i contorni sono disegnati attorno allo box-shadow (non all'interno).
Quindi dovrai servirlo (usando un css hack) una regola aggiuntiva: outline-offset: -X (X = lunghezza dell'ombra).

Answer 2

Questo errore verrà risolto con Firefox 30: https://bugzilla.mozilla.org/show_bug.cgi?id=480888#c109.

Fino ad allora si potrebbe applicare un altro box-shadow all'elemento, dal momento che è possibile avere più box-ombre:

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