html - CSS 轮廓属性在 Firefox 中显示为两条单独的线

Question

我正在使用 CSS 轮廓属性来创建虚线。虽然该行在 Chrome 和 Safari 中正确呈现，但在 Firefox 中它显示为两条单独的行。如果我仔细调整窗口的大小，我可以让这两条线完美对齐，使它们看起来像一条线，但我不应该这样做。

Chrome CSS 大纲属性:

CSS

.dash-border{
        outline-style: dashed;
        outline-color: #fff;
        width: 100%;
        position:absolute;
        bottom: 80px;
 }

HTML

<div class="dash-border"></div>

Answer 1

尝试使用-moz，例如:

.dash-border
{
   outline-style: dashed;
   outline-color: #fff;
   -moz-outline-style:dashed;
   -moz-outline-color: #fff;
   width: 100%;
   position:absolute;
   bottom: 80px;
}