CSS大纲无法在Firefox中正确呈现

Question

我对CSS outline属性在Firefox 7或更低版​​本上呈现的方式感到有些困惑.它显然在某个地方遇到了问题,但我找不到它.

它适用于所有其他主流浏览器(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 =阴影的长度).