html - CSS border-image 使用 bootstrap 在 firefox 中中断

Question

我有一个带有边框图像的导航栏，使用 .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 支持边框图像规范。我也在使用 bootstrap，但我唯一能看到额外的东西是 box-sizing 类。

这是导航栏本身的 fiddle 。

http://jsfiddle.net/serversides/dtpo3afL/

我在网站其他地方的 div 上使用了边框图像并且工作正常，但不确定我哪里出错了。

Answer 1

根据 CanIUse.com，这是 Firefox 在处理用作 border-image 的 SVG 图像时的一个错误

When using an SVG image as the url of a border-image, it doesn't scale to the size of the element it's being used on.

待定解决方案，我建议使用替代图像类型作为后备。

CanIuse Reference

Bugzilla Report