元素在 Firefox 和 Opera 中呈现不同
Element rendered differently in Firefox vs Opera
我在网站上工作时遇到了元素边框在 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;
}
尝试改变15 15 15 15 border image slice值:
//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 for mozilla browser
我在网站上工作时遇到了元素边框在 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;
}
尝试改变15 15 15 15 border image slice值:
//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 for mozilla browser