0

IE7 で正常に動作しない画像ズーム用の JQuery プラグインを使用しています。ズームされた画像の位置が異なります。

Firefox の場合:

ここに画像の説明を入力

IE7で

ここに画像の説明を入力

<span class="zoom" style="position: relative; overflow: hidden;">
<img  width="100px" height="100px" src="../gallery/sample/pic.jpg">
<img class="zoomImg" src="../gallery/sample/pic.jpg" style="position: absolute; top: -321px; left: -277.5px; opacity: 0; width: 420px; height: 336px; border: medium none; max-width: none;">
</span>


.zoom{display:inline-block,margin:10px;}
.zoomImg{z-index:5;}
4

3 に答える 3

0

だから、IEは楽しいです。IE7 およびそれ以前のバージョンでは、z-index の処理が新しいブラウザーとは少し異なります (参照)。

IE7 では、割り当てられた z-index を持つ各要素は、新しいスタッキング コンテキストを作成します。これは、その中にネストされている要素 z-index が、親要素に対して積み重ねられていることを意味します。簡単な例:

<div id="container-one" style="z-index: 1;">
    <p id="para-one" style="z-index: 99999;">Paragraph One</p>
</div>
<div id="container-two" style="z-index: 2;">
    <p id="para-two" style="z-index: 1;">Paragraph Two</p>
</div>

この例で#para-twoは、上記になります#para-one。「しかし#para-one、巨大な z-index を持っています。それはすべての上になければなりません」 . #container-oneの z インデックスは よりも低くなり#container-twoます。これらは、個別のスタック コンテキストになりました。

#para-oneの z-index は、内の #container-oneすべてのものにのみ関連しています。また、楽しみのためにopacity、新しいスタッキング コンテキストも作成します!!

わかりました、あなたのコードについては、あなたがフィドルを作成していないため、完全なhtmlが何であるかについて少し推測する必要がありました!!! . 何を変更する必要があるかについてのアイデアを提供するためだけに、IE7 で動作するようにしました。

フィドル

兄弟要素.zoomImgよりも高い z-index を持つように設定しました。代わりにa.divを削除opacityして追加したことに注意してください。z-indexこれは、より高い を強制的に割り当てることですz-index。opacity元に戻すことはできますが、IE7 で新しいスタック コンテキストが作成されることを忘れないでください。つまり、要素に を指定するopacityと、それとz-indexその子は現在のコンテキストから分離されます。IE7 へようこそ。楽しい時間をお過ごしください。

編集: IE7 では、不透明度に別のプロパティが必要です --

filter: alpha(opacity=50);-ソース

于 2013-11-14T10:15:59.413 に答える
-1

IE7.jsを試してください。機能しない場合は、この古くてバグのあるブラウザーのサポートを忘れてください。

于 2013-11-14T09:47:54.347 に答える