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