使用引导程序在Firefox中CSS边框图像中断

我有一个带有使用.svg作为背景的边框图像的导航栏。在Chrome和Safari中，它可以很好地工作，但是在Firefox中它会降低到位。使用引导程序在Firefox中CSS边框图像中断

我已经在浏览器中添加前缀，因为我认为这是问题

.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，但我唯一能看到的是盒子大小的类。

这是一个navbar本身的小提琴。

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

我已经使用上的div边框图像其他地方的网站，在那里我错了工作得很好，不知道。

来源

2015-09-15 ServerSideSkittles

看起来就像是一个[** **错误（https://bugzilla.mozilla.org/show_bug.cgi?id=619500）与FF＆SVG为'边境-image' –

是否有任何理由它必须是.svg？你可以用.png或.jpg来试试吗？ – Michael

@Paulie_D啊！好找，谢谢:) – ServerSideSkittles

根据CanIUse.com，这是在Firefox中的错误与SVG图像用作border-image

打交道时使用SVG图像作为边界图像的URL时，它不缩放到正在使用的元素的大小。

等待的决议，我会建议一个替代图像类型作为后备。

CanIuse Reference

Bugzilla Report

来源

2015-09-15 14:16:25

使用引导程序在Firefox中CSS边框图像中断

回答

相关问题