0

クリックすると aが含まslideToggle()れる aを呼び出すメニュー ボタンがあります。デスクトップの Chrome および Firefox では、次のように表示されます。<div><ul>

ここに画像の説明を入力

つまり、要素が下にスライドし、その下のコンテンツを押し下げます。それが期待される動作です。

ただし、iOS7 (および Adob​​e Edge Inspect) の Chrome と Safari、および 4.1.2 の Android ブラウザーでは、メニューは DOM でその下の要素をオーバーレイします。

ここに画像の説明を入力

私が試したこと

  • 私たちの良き友人z-index(より高い で、その<ul>下の要素でマイナスを試してみました)
  • display両方の要素で CSS プロパティのすべての順列を試しました(例: block、display-block)。
  • positionプロパティのすべての順列を試しました（1つはabsolute、もう1つは 、 relative1つはstatic、もう1つrelativeは など）。
  • 両方の要素をフローティングおよびアンフローティングするすべての順列を試しました。
  • ハードコーディングされた高さプロパティをメニューに追加しようとしました
  • マージンとパディングを使用

注: 残念ながら、これは開発環境にあるため、テストできる場所はありません。ただし、js フィドルで更新します。

編集

これはフィドルですが、メディアクエリで動作させるのに問題があります。

編集 2

それは実際に私の電話でそのフィドルで動作するので、私が持っている他の CSS である必要があります。

編集 3

私が使用しているフレームワークであるFoundationをコメントアウトしようとしましたが、それでも起こります。それは別の場所にあるに違いありません。

4

1 に答える 1

0

アプリケーション全体で 20,000 行以上の CSS 全体を 2 等分すると、次のようになります。

nav の包含要素には、CSS<div class="header-container">の高さプロパティがありました。height: 50pxどうやら、私が試したデスクトップ ブラウザは、 aslideDownを含む要素の高さの増加を考慮に入れていると解釈しましたが、モバイル ブラウザはそうではありませんでした。

そのプロパティを変更してmin-height: 50pxこの問題を解決しました。

于 2013-10-18T21:08:41.400 に答える