CSS3：在Firefox中无法正确显示锯齿状边框

Question

见这里：JSFiddle Demo

以下是相关的HTML和CSS：

<div class="header"><h1>This is a header</h1></div>

.header{
    color:white;
    background-color:#2B3A48;
    text-align:center;
    height: 100px;
    position: relative;
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid transparent;
    margin: 0 5px;
    /*box-sizing: border-box;*/
    background-clip: padding-box;
    /*-webkit-filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px);*/
}
.header:before, .header:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 22px;
    background-repeat: repeat-y;
    background-size: 22px 10px;
    z-index: 1;
}
.header:before {
    left: -5px;
    background-image: linear-gradient(-45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), linear-gradient(45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -webkit-linear-gradient(-45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -webkit-linear-gradient(45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -moz-linear-gradient(-45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -moz-linear-gradient(45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -o-linear-gradient(-45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -o-linear-gradient(45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
}
.header:after {
    border-left: 10px solid transparent;
    right: -5px;
    background-image: linear-gradient(135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), linear-gradient(-135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -webkit-linear-gradient(135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -webkit-linear-gradient(-135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -moz-linear-gradient(135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -moz-linear-gradient(-135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -o-linear-gradient(135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -o-linear-gradient(-135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
}

正如预期的那样，梯度适用于IE10 +（可能是IE9 / IE8）和其他现代浏览器，见下文：

然而，Firefox最终看起来像这样：

有谁知道如何解决这个问题？

另外，如果在其他浏览器中可以使用-webkit-filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px);，我如何将其转换为其他浏览器？

Answer 1

在为CSS渲染透明度时，Firefox似乎有些错误。

幸运的是，您可以在firefox特定的CSS中替换transparent #2B3A48，如下所示： - http://codepen.io/mrmoje/pen/dkAwE ....瞧！你的文物消失了！

让-webkit-filter在其他浏览器上运行会很棘手。在撰写本文时，只有webkit和blink（Chrome（ium），Opera，Safari等）才能使用你想要的CSS滤镜。

Gecko（firefox）目前不支持任何这些。

我不确定IE的CSS directX过滤器可以达到相同的效果。但即使他们这样做，他们也将在未来的IE版本中被删除

一个好的跨浏览器解决方法是在图像中“硬编码”你的投影并提供服务。