私は現在このサイトに取り組んでおり、Safari と Chrome (最新バージョン) の両方でトップ メニューのナビゲーションに問題があります。Firefox だけでなく、最新の Internet Explorer でも動作します。
応答解像度は 4 つあります。標準および最大幅、iPad の縦向き、iPhone の横向き、および iPhone の縦向き。iPhone の縦向き以外のすべての解像度でサイズを前後に変更すると、問題は発生しません。iPhone のポートレートからサイズを変更すると、上部のメニュー ナビゲーションがヘッダーの下の境界線の下にジャンプします。
iPhone のポートレートのメディアクエリを調べてみましたが、何が問題なのかわかりませんでした。
私が提供した小さな情報で私を助けてくれることを願っています.すべてのコードをjsfiddleに入れるには精巧すぎました.
もう少し掘り下げて、さまざまなcssオプションを使用してテストを行いましたが、実際にはメインヘッダーのdivに高さを設定し、その下のcontainer-divをクリアするのを忘れていました。私はこれを行い、問題を修正しました。
私が持っているコードのいくつかを知っています。つまり、ナビゲーションが正確に行われるべきではありませんが、すべてのブラウザーと解像度で機能するようになりました。これは重要な部分です。
私を正しい方向に導いてくれてありがとう！
ヘッダーは、内部要素にインライン ブロックが必要な別の方法で処理する必要があります。ヘッダーには width: 100% の inline-block が必要です。これは親の幅の影響を受け、レスポンシブの問題を解決するはずです
なぜこれが起こっているのかはよくわかりませんが、に追加overflow: hiddenすると、何#main-headerが起こっているのかがわかります。フロートの混乱が少しあります。これは、HTML のブロック要素の後に適切なフロート要素がある場合に IE6 でよくある問題でした...ただし、ヘッダーに隠しオーバーフローを保持して追加すると、うまくいきます。float: left#logo