html - Mozilla Firefox 中的边框图像中断

Question

当尝试将“条纹”border-image 应用于文本输入字段时，它在 Mozilla Firefox 中的某些参数下会中断。

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

如您所见，该页面呈现了一个简单的文本字段，其周围有黑色条纹边框。这个 fiddle 实际上在我试过的任何浏览器中都能正常工作。

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

这是我使用最新的 Mozilla Firefox (35.0) 打开 URL 时看到的内容:

如您所见，左右边框正确呈现，但顶部和底部的边框看起来有些“实心”。我还在 Windows 上的 IE10、Chrome、Opera 和 Safari 中对此进行了测试，除 Firefox 外，它们都可以正常显示边框。

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

知道是什么原因造成的，或者为什么我不能在 jsfiddle 中重现它？

附言我还通过在 Firefox 中拖放 HTML 文件(以排除任何与主机相关的问题)来尝试此操作，但它仍然失败。这是一个可以自己尝试的 zip:http://test.tonybogdanov.com/border-image-mozilla-issue/files.zip

Answer 1

欢迎来到 CSS 中最反直觉的部分之一。

您可以使用此工具:http://border-image.com/使用您的图像并计算出正确的偏移量和边框大小应该是多少。 (您可以在底部预览 CSS 文本周围的边框)

祝你好运