textarea は Chrome は inline-block、Firefox は block で異なる

カテゴリ：Webサイト

記事の種類：ハマったこと

2つの textarea を並べて表示する際に、Google Chrome と Firefox で高さが一致せず不揃いな状態になる場合がありました。（Chrome の方が余計なマージンが入り縦のサイズが若干大きい）

これは textarea 要素は Chrome では display: inline-block、Firefox は display: block で異なるのが原因でした。 解決策として、textarea の css に display: block を指定して、block で統一することで解決しました。

※いい加減、もうブラウザ間でデフォルト値が異なるような仕様の設定は止めてほしいものですね…。

公開日時：2025年05月10日 23:04:11
最終更新日時：2025年05月10日 23:25:51