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

Question

我对Firefox大纲属性在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。

在此之前，您可以将另一个框阴影应用于元素，因为您可以有多个框阴影：

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