3

次のcssスタイルのdiv内に固定サイドメニューでスタイル設定されたWebページがあります。

div#sidemenu
{
  top: 120px; left: 800px;
  width: 135px; 
  height: 560px;
  background-image: url(img/bg.png);
  position: fixed;  
  z-index: 30;
}

divは単純です：

<div id="sidemenu">
<ul>
<li>link1</li>
...
<li>linkn</li>
</ul>
</div>

ページを下にスクロールしている間、固定されたままになるはずです。

これは、WindowsバージョンのSafariでも、WindowsおよびMacOS上のすべての非Safariブラウザ（IE、FF、OP）で動作しますが、MacOSSafariでは動作しません。

MacOS Safariでは固定されたままですが、スクロール中に上下にジャンプ/震え/震えます。

私はこの問題についてしばらく調査し、cssの能力を比較し、z-indexを減らし、下部を修正してみました。何も機能していないようです。

誰かもそのようなことを経験したことがありますか？そして：あなたはそれを修正できますか？

追加情報：

  • bg画像は透明度のあるpngです
  • bg画像はコンテナdivのように完全なサイズです
4

1 に答える 1

1

背景画像のジャンプで同様の経験があり、クロスブラウザーと思われる回避策の1つは、ラッピングdiv内にdivを追加することです。重要なことは、新しい div に高さを与えることです。そうしないと、モバイル サファリでスクロール時に調整される可能性があります。

<div id="sidemenu">
<div id="bg"></div>
<ul>
<li>link1</li>
...
<li>linkn</li>
</ul>
</div>
div#sidemenu
{
  top: 120px; left: 800px;
  width: 135px; 
  height: 560px;
  position: fixed;  
  z-index: 30;
}

#bg {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    height: 500px;
    background-image: url(img/bg.png);
    background-position: 0 0;
}
于 2014-04-26T01:18:34.013 に答える