タブレットでのサイト表示について

Question

お世話になっております。

トリプルでiframeのヘッダーを作り、検索窓を設置しているのですが
iPadで動作せず検索ができないようなのです。

CHROMEのデベロッパーツールというものがあったので
それで確認してみたらそこでは動いたのですが
機種によって動作しない場合などもありますか？
もしタグなどに誤りがありましたら、教えていただきたいです。

該当のページ
https://shopping.geocities.jp/***/header.html

Answer

ECマスターズの田中です。

header.htmlを確認したところ、
floatが正しく解除されておらず、高さを失っている要素が
いくつか見当たりました。

高さを失う仕組みの説明や、対策方法については、下記ページをご参照ください。
https://qiita.com/mariofujisaki/items/2ad1de8432d7249afadc

header.htmlの場合は、下記スタイルシートを加えていただくことで
各要素の高さが認識され、検索窓も動作するようになるはずですので、
追記していただきますようお願いします。

= この下の行から ====================
#header_item:after, #header:after {
    content: " ";
    display: block;
    clear: both;
}

#headbanner {
    float: left;
}
= この上の行まで ====================

Answer

田中様ありがとうございます。
スタイルシートを追加したところ検索窓が動作しました。

ご紹介いただいたページを読んで
正しく動かなかった理由も理解できました。
お手数をおかけしました。