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;
}