当尝试对border-image文本输入字段应用“条纹”时，它会在某些参数下在 Mozilla Firefox 中中断。
看看这个 jsfiddle：http: //jsfiddle.net/sxpL9zw1
如您所见，页面呈现一个简单的文本字段，其周围带有黑色条纹边框。这个小提琴实际上在我尝试过的任何浏览器中都可以正常工作。
但是，当我在主机或本地主机上运行完全相同的标记时，事情变得非常奇怪：http: //test.tonybogdanov.com/border-image-mozilla-issue/
以下是我使用最新的 Mozilla Firefox (35.0) 打开 URL 时看到的内容：
正如您所看到的，左右边框正确渲染，但顶部和底部的边框看起来有点“实心”。我还在 Windows 上的 IE10、Chrome、Opera 和 Safari 中对此进行了测试，除 Firefox 外，它们的边框都显示得很好。
此外，当我增加border-width上述9px问题时，问题消失了，当我删除width属性时也会发生这种情况。
有什么想法可能导致这种情况，或者为什么我不能在 jsfiddle 中重现它？
PS我也通过在Firefox中拖放HTML文件来尝试这个（以排除任何与主机相关的问题），但它仍然失败。这是一个自己尝试的 zip：http: //test.tonybogdanov.com/border-image-mozilla-issue/files.zip