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

Question

我对 CSS 大纲属性在 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 =影子的长度）。

Answer 2

Firefox 30 将修复此错误： https ://bugzilla.mozilla.org/show_bug.cgi?id=480888#c109 。

在此之前，您可以将另一个 box-shadow 应用于元素，因为您可以拥有多个 box-shadow：

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