在Firefox和Opera中，元素呈现不同

Question

在Firefox和Opera中，元素呈现不同

htmlcssfirefoxopera

3

我正在开发一个网站，遇到了一个问题：元素的边框在Firefox和Opera上呈现不同。

如果有任何修复建议，我将非常感谢。

图片（左侧为Opera，右侧为Firefox）

编辑：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;
}

- Filipsi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- muzazu · 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 浏览器。