1

私は ie7 の z-index バグを認識していますが、まだ div を ie の画像の上に置くことができません。これは私が持っている現在のコードです:

<div id="wrapper">
  <div id="content">
    <div class="copy">...</div>
    <div id="toggle-view"></div>
    <img id="view" src="/..." />
  </div>
</div>

そして、ここにスタイリングがあります：

#wrapper { width: 960px; margin: 0 auto 0 auto; background: #fff; }
#content { width: 960px; height: 555px; position: relative; z-index: 20; }
#toggle-view { display: block; width: 150px; height: 25px; cursor: pointer; position: absolute; top: 12px; right: 10px; z-index: 10; }
#view { width: 722px; height: 555px; position: relative; z-index: 1; }

これは Chrome/FF などでは正常に機能しますが、ie7 では機能しません。#toggle-view div を #view img の上に配置するにはどうすればよいですか。

ありがとう

編集：わかりました。何らかの理由で、要素に 'background' プロパティが設定されていない場合、つまり、z-indexes を正しく処理しません (どのバージョンでも.. 9 のようです)。神、私はIEがとても嫌いです..

4

1 に答える 1

1

あなたが上に言うとき、あなたはdivをその上またはその上に置きたいという意味ですか？

私はあなたのコードを使用してjsfiddlehttp://jsfiddle.net/trickeedickee/wPz2X/を作成しましたが、 IE7では完全に正常に機能します。＃toggle-viewdivをコンテナーの右側に配置します。これは意図的なものです。これが答えであるかどうかを教えてください。そうでない場合は、もう少しお手伝いします。

100％明確にするために、IE7でjsfiddleのスクリーングラブを添付しました。＃toggle-viewを左側に配置し、レイヤースタックのように画像の上に配置します。それは明らかに画像の上にあります。これはあなたが探している結果ではありませんか？

ここに画像の説明を入力してください

于 2012-05-02T13:30:53.837 に答える