Mozilla Firefox中的边框图像中断

Question

当试图应用＆＃34;条纹＆＃34; border-image到文本输入字段，它在某些参数下在Mozilla Firefox中中断。

看看这个jsfiddle：http://jsfiddle.net/sxpL9zw1

正如您所看到的，该页面呈现了一个简单的文本字段，其周围带有黑色条纹边框。这个小提琴在我尝试过的任何浏览器中都可以正常使用。

然而，当我在主机或localhost上运行完全相同的标记时，事情变得非常奇怪：http://test.tonybogdanov.com/border-image-mozilla-issue/

以下是我使用最新的Mozilla Firefox（35.0）打开网址时看到的内容：

正如你所看到的那样，左右边框正确渲染，但顶部和底部边框都是以某种方式“固定”＃34;看着。我还在Windows上的IE10，Chrome，Opera和Safari中对它进行了测试，除了Firefox之外，它们都显示边框很好。

此外，当我将border-width增加到9px以上时，问题就会消失，这也会在我删除width属性时发生。

任何可能导致此问题的原因或为何无法在jsfiddle中重现它？

P.S。我也通过在Firefox中拖放HTML文件（以排除任何与主机相关的问题）来尝试这一点，但它仍然失败。这是一个自己试用的拉链：http://test.tonybogdanov.com/border-image-mozilla-issue/files.zip

Answer 1

欢迎使用最反直觉的CSS之一。

您可以将此工具与http://border-image.com/一起使用，并找出正确的偏移量和边框大小。 （您可以预览底部CSS文本周围的边框）

祝你好运