Safariでinputのplaceholderが上にずれる問題

問題

inputタグのplaceholderの文字がSafariだけ上にずれてしまう。

解決方法

「input placeholder safari ずれる」などで検索します。

inputに対して、line-height が指定されているときに問題が発生することがあるそうです。

ブラウザの開発ツールを開き line-heightが当たっているかを確認します。

どの要素になんのStyleが適用されているかを確認する場合、以下のURLが参考になります。

https://developers.google.com/web/tools/chrome-devtools/inspect-styles?hl=ja

line-height が当たっている箇所がわかったら、全体的な影響がないかをよく確認し変更します。

なお、line-heightのdefaultは「normal」です。

https://www.w3schools.com/cssref/pr_dim_line-height.asp