Firefoxで正しく表示されないCSSアウトライン

Question

Firefox 7以降でCSSアウトラインプロパティがレンダリングされる方法に少し困惑しています。 明らかにどこかに問題がありますが、見つけられません。

他のすべてのメインブラウザ（Opera、Chrome、IE、Safari）でも正常に動作します。

参考用にいくつかのスクリーンショットを追加しました。 Firefoxのから1：

やChromeから他：XHTMLここ

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

ます：ここで

は、CSSです

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

どうすればこの問題を解決できますか？

Answer 1

Firefoxのアウトラインはbox-shadow（内側ではありません）の周囲に描画されます。
したがって、CSSハックを使用してoutline-offset: -X（X =シャドウの長さ）の追加ルールを提供する必要があります。

Answer 2

こののバグは、Firefox 30：https://bugzilla.mozilla.org/show_bug.cgi?id=480888#c109で修正されます。

あなたは、複数のボックスシャドウを持つことができるので、あなたは、要素に別のボックスシャドウを適用することができるまで：

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