CSS大綱在Firefox中無法正確顯示

Question

我對Firefox大小爲7或以下的CSS大綱屬性渲染感到困惑。 這顯然在某個地方出了問題，但我無法找到它。

它適用於所有其他主要瀏覽器（Opera，Chrome，IE，Safari）。

我添加了幾個截圖供參考。一個從Firefox：

，並從Chrome中的其他：

這裏的CSS：

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

這裏的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> 

我該如何解決這個問題？

Answer 1

Firefox上的輪廓圍繞着box-shadow（不在裏面）繪製。
所以你將不得不爲它服務（使用css hack）一個附加規則：outline-offset: -X（X =影子的長度）。

Answer 2

This bug將被Firefox 30：https://bugzilla.mozilla.org/show_bug.cgi?id=480888#c109修復。

在那之前，你可以應用其他的box-shadow的元素，因爲你可以有多個箱陰影：

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