スマホでinputのplaceholderテキストがずれる原因と対処法について

  • 2020年4月20日
  • 2020年4月20日
  • CSS, Web制作
  • 71回
  • 0件
CSS

Chromeのディベロッパーツールが使いやすくて、ついChromeの有能さに甘えてゆるっとしたコードを書くと、IEやスマホやSafariでみたとき崩れていたりするので焦ります。。

先日、高さが固定されていた検索フォームのinputの中のplaceholderが上の方にずれていたので、以下のように修正しました。
Chromeはこの書き方でも崩れないんですよね。。

崩れた書き方

input[type="text"] {
  height: 30px;
  padding: 20px;
  font-size: 14px;
}

なぜ崩れたかわかりますか?

こちら、リニューアル案件だったので、元コードを修正した結果、こんなコードになってしまったのですが、

高さを指定していたのに、paddingの記述もあったのでオーバーしちゃってたんです!

padding (20px + 20px)+ font (14px) > 30px

Chromeは、おかしい書き方をしていても、「なんかおかしいこと書いてあるけど意図はわかったよー」という感じで空気を読んでくれるんですね。

でも、IEなどには通用しません。ちゃんと記載しましょう。

崩れない書き方

input[type="text"] {
  height: 30px;
  padding: 0 20px;
  font-size: 14px;
}

デザイン的に縛りがなければ、高さの固定をやめて、paddingで記載するほうがいいです。

input[type="text"] {
  /* height: 30px; */ /* この記述は削除する */
  padding: 20px;
  font-size: 14px;
}