現在制作中のサイトで、サイト内検索フォームを設置しているのですが、Chromeで作っていて完成したと思ったら、Firefoxで崩れていました・・・。これを直すのに、かなり苦労してしまったので、メモしたいと思います。完成は、こちらの検索フォームです。フォーカス時には、薄い紫色になります。それが、Firefoxでは、このように、サーチアイコンのあるボタンの部分の高さが、検索ワードを入力するテキストフィールドよりも高くなっていて、ボタンの方が下にはみ出てしまいました。HTMLは、以下の通り。</form></div>そしてCSSは、もともと以下の通り記載していました。※Sassで記述しています。auto;}最初はinput要素やbutton要素のheightを調整したりしていました。上のソースコードでは、input要素の高さを30pxに設定しているのですが、そうするとChromeとSafariでは、30pxと上下のborder1pxずつで、全体の高さは32pxになり、Firefoxでは、すべて合わせても30pxになっています。それに合わせて、button要素も同じ高さにしたいのですが、Chrome、Safariではbutton要素の高さを32pxに設定するとぴったりで、FireFoxでは、30pxに設定するとぴったりとなります。2px(上下のborder分)のズレが発生してしまうのです。Firefoxのズレを直すためにheightの値を変えるだけでは、Chromeで高さが足りなくなってしまいました。そこで、inputもbuttonも両方、displayをinline-blockにし、inputのline-heightを30px、heightを30pxにし、buttonの、line-heightを30px、heightをautoにしました。「inputのズレを揃えるCSSまとめ」のサイトを発見し、こちらのコードを記述しました。}ボタン部分のposition:absoluteで位置をしている部分の、top:0は取りました。CSSは、このようになりました。}}そうすると、今度は、Chromeはinputもbuttonも高さが32pxなのに、Firefoxはinputの高さが30px、buttonの高さが、34pxになっていました。Firefoxでは、このように、サーチアイコンのあるボタンの部分の高さが、検索ワードを入力するテキストフィールドよりも高くなっていて、ボタンの方が下にはみ出てしまいました。Firefoxのbuttonだけ大きくなる問題です。Overflow」のサイトに載っているとおり、下記のコードを記述しました。}すると、Firefoxのbuttonが32pxになりました。inputは30pxのままなので、まだ崩れています。(Chromeは変化なし、崩れてもいない状態です。content-box;}この部分に、ベンダープレフィックスなしのbox-sizing:content-box;を追記したら、ついに直りました!!!!!!なので、最終的なCSSは、以下の通りになりました。auto;}参考にさせていただいたサイト様のコードのおかげで、崩れを直すことができました。あとは、heightではなく、line-heightで高さを指定することと、box-sizing:content-box;(ベンダープレフィックスあり・なし版)を記述すること、display:inline-block;が鍵でした。