Firefox 轮廓渲染错误答案

【问题标题】：Firefox outline rendering wrongFirefox 轮廓渲染错误
【发布时间】：2013-08-22 15:25:03
【问题描述】：

在我正在构建的网站上，我使用边框-轮廓-框阴影作为主体。

请看这里jsFiddle

border: 9px solid #0C144E;
outline: 9px solid #fff;
box-shadow: 0 0 0px 18px #CC092F;

我的问题是 Firefox 以不同的方式呈现轮廓。

我可以通过申请解决它：

outline-offset: -18px;

虽然它修复了firefox，但这意味着它在Chrome、Safari中无法正确显示，有没有办法将它应用到firefox，我尝试添加-moz-无济于事。或者另一种方式。

【问题讨论】：

您尝试实现的双边框效果看起来非常类似于我几天前回答的问题中的一个 - 请参阅stackoverflow.com/questions/18219056/…。我使用 CSS :before 创建双边框效果。这是我为该答案创建的小提琴：jsfiddle.net/k8v7D
感谢您的建议！
如果该技术适合您，那么我建议使用它来支持根据您接受的答案使用浏览器破解；浏览器黑客应该永远是最后的手段（因为如果它是一个 FF 错误，如果 Mozilla 在下一个版本中修复该错误会发生什么？）

【解决方案1】：

您可以使用此处显示的技术：CSS Hacks Targeting Firefox

@-moz-document url-prefix() { 
  body {
    outline-offset: -18px;
  }
}

【讨论】：