元素在Firefox和Opera中的呈現方式不同

Question

我正在一個網站上工作，我遇到了一個問題，即元素的邊框在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; 
} 

Answer 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瀏覽器中