Html firefox中使用引导的CSS边框图像中断

我有一个带有边框图像的导航栏，背景是.svg。在Chrome和Safari中效果很好，但在Firefox中效果不佳

我在浏览器中添加了前缀，因为我认为这就是问题所在

.navbar-nav {
-moz-border-image: url('http://imgh.us/brush-stroke.svg') 5 28 27 26 fill stretch;
-webkit-border-image: url('http://imgh.us/brush-stroke.svg') 5 28 27 26 fill stretch;
-o-border-image: url('http://imgh.us/brush-stroke.svg') 5 28 27 26 fill stretch;
border-image: url('http://imgh.us/brush-stroke.svg') 5 28 27 26 fill stretch;
}

这是附在ul级导航栏上的

<ul class="nav navbar-nav navbar-right">

查找它显示firefox支持border图像规范。我也使用bootstrap，但我能看到的唯一额外的东西是box Size类

这是导航栏本身的一把小提琴

---

我在网站其他地方的div上使用了border image，效果很好，不知道哪里出了问题。

根据CanIUse.com的说法，在Firefox中处理SVG图像时，这是一个bug，用作

border image

当使用SVG图像作为边框图像的url时，它不会缩放到使用它的元素的大小

在等待解决之前，我建议使用另一种图像类型作为备用

---

看起来像是一个带有FF&SVG的边框图像有什么理由必须是.SVG吗？你能用.png或.jpg试试吗？@Paulie_D Ah！很好的发现，谢谢：）@Michael-threaded.png，它很有效。非常感谢您如果有疑问，请查看并单击“已知问题”