Firefox 与 Opera 中的元素呈现方式不同答案

【问题标题】：Element rendered differently in Firefox vs OperaFirefox 与 Opera 中的元素呈现方式不同
【发布时间】：2015-10-03 17:20:35
【问题描述】：

我在一个网站上工作，我遇到了一个问题，即元素的边框在 Firefox 和 Opera 上呈现不同。

对于如何解决此问题的任何建议，我将不胜感激。

Picture (Opera on the left, Firefox on the right)

编辑： CodePen

HTML：

<div class="red-bordered-top-bar"></div>
<div class="red-bordered-bar" style="height: 256px;"></div>
<div class="red-bordered-bottom-bar"></div>

CSS：

.red-bordered-bottom-bar {
    position: relative;
    border-width: 0px 0px 15px;
    border-color: transparent;
    border-style: solid;
    border-image: url("../Resources/primary_bottom.svg") 15 15 15 15 round round;
    background-color: #33393E;
}

.red-bordered-bar {
    position: relative;
    background-color: #FE634A;
}

.red-bordered-top-bar {
    position: relative;
    border-width: 15px 0px 0px;
    border-style: solid;
    border-color: transparent;
    border-image: url("../Resources/primary_top.svg") 15 15 15 15 round round;
    background-color: #33393E;
}

【问题讨论】：

标签： html css firefox opera

【解决方案1】：

尝试改变15 15 15 15边框图像切片值：

//top     
-moz-border-image: url("https://dl.dropboxusercontent.com/u/35123963/primary_top.svg") 11 15 15 15 round round !important;

//bottom
-moz-border-image: url("https://dl.dropboxusercontent.com/u/35123963/primary_bottom.svg") 15 15 11 15 round round !important;

-moz 用于 mozilla 浏览器

【讨论】：

为什么你认为这个供应商前缀会有所作为？ Opera 从 v15.0 开始没有前缀，Firefox 从 15 开始也没有前缀。