0
當試圖將「條狀」border-image應用於文本輸入字段時，它在特定參數下會在Mozilla Firefox中中斷。Mozilla Firefox中的邊框圖像中斷
看看這個的jsfiddle：http://jsfiddle.net/sxpL9zw1
正如你所看到的頁面呈現一個簡單的文本字段與它周圍的黑色條紋邊框。這個小提琴在我試過的任何瀏覽器中都能正常工作。
然而，事情就變得很奇怪，當我在我的主機或本地主機上運行完全一樣的標記：http://test.tonybogdanov.com/border-image-mozilla-issue/
這裏是我所看到的，當我打開了最新的Mozilla Firefox瀏覽器的URL（35.0）：
正如你所看到的，左邊框和右邊框可以正確呈現，但是頂部和底部的邊框在某種程度上是「穩固」的。我還在Windows上測試了IE10，Chrome，Opera和Safari，並且它們都顯示出邊框很好，除了Firefox。
此外，當我增加border-width高於9px問題消失，這也發生在我刪除width屬性時。
任何想法可能導致這個或爲什麼我不能在jsfiddle中重現它？
P.S.我還通過在Firefox中拖放HTML文件（排除與主機相關的任何問題）來嘗試此操作，但仍然失敗。這裏有一個zip自己嘗試：http://test.tonybogdanov.com/border-image-mozilla-issue/files.zip
是的，這是一個偉大的工具，但問題似乎真的是在Mozilla。看看：http：//goo.gl/yhDjns嘗試將頂部邊框的邊框大小更改爲小於6像素的值，然後看看會發生什麼:)它就像是6px以下的任何東西一樣Firefox：「哦， * k it，我要堅強。「 – 2015-01-16 09:43:38
所有似乎都很好的左/右邊界儘管..順便說一句，縮寫似乎有一些問題，這裏是完整的URL：http://border-image.com/#{%22src%22%3A%22http ％3A％2F％2Ftest.tonybogdanov.com％2Fborder-圖像Mozilla的問題％2Fborder-stripes.png％22％2C％22linkBorder％22％3Afalse％2C％22borderWidth％22％3A％5B12％2C0％2C0％2C0 ％5D％2C％22imageOffset％22％3A％5B50％2C50％2C50％2C50％5D％2C％22fill％22％3Afalse％2C％22setRepat％22％3Afalse％2C％22repeat％22％3A％5B％22repeat％22 ％2C％22重複％22％5D％2C％22比例因子％22％3A3％2C％22set重複％22％3Atrue} – 2015-01-16 09:45:02
抱歉已經這麼久了 - 嘗試在邊緣使用圓形 [border-image.com]（http： //border-image.com/#%7B%22src%22%3A%22http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-background%2Fborder.png%22%2C%22linkBorder%22%3Atrue% 2C％22borderWidth％22％3A％5B0％2C0％2C0％2C0％5D％2C％22imageOffset％22％3A％5B28％2C27％2C27％2C27％5D％2C％22fill％22％3Atrue％2C％22setRepat％22％ 3Afalse％2C％22repeat％22％3A％5B％22round％22％2C％22round％22％5D％2C 22％比例因子％22％3A3％2C％22setRepeat％22％3Atrue％7D） – 2015-01-29 14:01:17