CSSのbox-sizing: border-box; がFirefoxだけ効かない

Question

現在Javaを使ってWebアプリ作成を行っています。

質問があるのですが、
結論から言うと、

CSSのbox-sizing: border-box; がFirefoxだけ効かないといった経験のある方はいらっしゃらないでしょうか？
またその解決法を知っている方はおられないでしょうか？

今JSPにCSSを使っているのですが、
どうもアカウント情報登録画面の見え方がおかしくなってしまいます。
テキストボックスが微妙にズレていたり、左端が揃っていなかったり。
box-sizing: border-box;がブラウザのデバッグツールで見ても設定されているのにWidth幅からpaddingなどがはみ出している項目があるのです。
それがFireFoxだけズレており、IE11やChromeでは正確に見えているのです。

モックのHTMLではFirefoxでも正確に見えています。
しかし、JSPのタグの配置の仕方などにもおかしなとこはあるように思えず、
またクライアント側の制御に詳しい方に聞いても、「原因はbox-sizing: border-box;が効いていないことだが、それの対処法がわからない」とおっしゃっています。

もし分かる方や何か思い当たる節のある方がいらっしゃいましたらアドバイスいただけると嬉しいです。

Answer 1

ベンダープレフィックスを付けてみてはいかがでしょうか。

.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

また、MDNを確認したところ、FireFoxのバージョンによってはバグがあるようです。

Comments

[k499778]

tako-blackさん
回答ありがとうございます！

投稿に書いてはいませんでしたが、ベンダープレフィックスも記述しています。
それでもダメでした。

バージョンによってはバグがあるのですね。今把握できていないのでまた確認はしてみます。

ただHTMLのモックでは、ズレなく画面が表示できていたので、jspの書き方、またはHTMLでなくjspであることに問題があるのかなとも思っています。

ただ変な所も見当たらなかったですし、クライアント側に詳しい方もbox-sizingがなぜか効いていない部分があると言っていたました。

なぜだろうと頭を抱えています。

すいません。長く喋ってしまいました。
迅速な回答ありがとうございました。