お客さんからページの右上にある検索ボタンがとんでもないところに表示するという相談が来た。この部分は他の会社が作った部分だけど、対応が安い早いと重宝されている自分のところに回ってきた。
検索入力項目と検索ボタンが横に並んでいるはずだけど、検索ボタンが入力項目の下に送られて表示されてしまうらしい。
どうも、特定のPCで発生するとのこと。自分のところのPCでChrome, Firefox, Edge, それと忘れていけないInternet Explorer（忘れたいけど・・・）で試してみたけど、すべて正常に検索ボタンが配置している。スマートフォンも試してみたけど、唯一おかしな動作をしたのはiPhoneのSafariだった。
とりあえず検索入力項目の幅を小さくしてみると、正常にiPhoneでも表示するようになった。だけど、これだとPCでは検索ボタンの横が空いてしまう。
そこで、iPhoneのCSSでどのような状態になっているかを調べるため、iPhoneの実機でデバッグできるようにする。参考にしたのは以下のサイトである。意外に簡単にiPhoneのSafariページをMacのSafariの開発ツールから見ることができた。
MacとiPhoneをつなげて調べてみると、入力項目のpaddingの初期値が設定していないのが原因だった。iPhoneの場合、何もpaddingを設定しないと0.5emが初期値になってしまう。ちなみに、初期値は以下の通りになる。
| iPhone Safari | PC Chrome | |
| padding | 0.5em | 1px |
| margin | 0em | 0em |
どうも最初に作った人は、検索フォーム幅、入力項目幅を固定にして、marginやフォントサイズとかすべてのものをピクセル単位で指定していたけど、paddingだけを指定し忘れたのが原因だった。そもそも、CSSのリセットをしていなかったのが敗因だった。
特定のPCでどうして発生するかは、その実機を見に行けば原因解明は速いかもしれない。こちれは不明？ 古いバージョンのブラウザがインストールされているから？
ポチップ
ポチップ