テキスト入力フィールドに「ストライプ」を適用しようとすると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