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 = 阴影的长度)。