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

【问题标题】：CSS outline not rendering correctly in FirefoxCSS 大纲在 Firefox 中无法正确呈现
【发布时间】：2011-12-11 15:01:42
【问题描述】：

我对在 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>

我该如何解决这个问题？

【问题讨论】：

标签： css firefox outline

【解决方案1】：

在 Firefox 上，轮廓围绕box-shadow（不在内部）绘制。
所以你必须为它提供一个附加规则（使用 css hack）：outline-offset: -X（X = 阴影的长度）。

【讨论】：

酷！有用。谢谢你。网络上是否有任何参考资料可以了解这些小问题，例如 Firefox 的这个问题？
哦，哦！它现在破坏了 Opera 上的渲染！有什么建议吗？
@user7 就像我说的那样，您需要使用 CSS hack 才能将其专门提供给 Firefox。
对不起。我刚刚将新的 css 属性添加到主 CSS 文件中。我将它专门用于 Firefox。再次感谢。

【解决方案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;
}

【讨论】：