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正在支持border-image规范。我也在使用bootstrap，但我唯一能看到的是box-sizing类。

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

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

我在网站上其他地方的div上使用过边框图像，效果很好，不知道我哪里出错了。

Answer 1

根据CanIUse.com的说法，在处理用作border-image

的SVG图像时，这是Firefox中的一个错误

当使用SVG图像作为边框图像的网址时，它不会缩放到正在使用的元素的大小。

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

CanIuse Reference

Bugzilla Report

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

1 个答案: