Jquery缩放IE7 css绝对定位错误

Question

我使用的是JQuery plug-in for image zoom，在IE7中无法正常工作，缩放图像的位置不同。

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;}

Answer 1

display:inline-block CSS语句将元素显示为内联级块容器。此块的内部被格式化为块级框，并且元素本身被格式化为内联级框。试着玩弄这个，它在IE7和早期的这个属性中已知错误。

另外一件事，如插件网站上所述：兼容：Chrome，Firefox，Safari，Opera，Internet Explorer 7 +中的jQuery 1.7+。所以，显然是插件适用于IE7以上的浏览器。

Answer 2

所以，IE很有趣。 IE7和更早版本的处理z-index与新浏览器（Reference）略有不同。

在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-index低于#container-two。它们现在是单独的堆叠上下文。

#para-one的z-index仅与 #container-one中的所有有关。 此外，对于额外的有趣，opacity也会创建新的堆叠上下文!!

好的，对于你的代码，我不得不猜测完整的html是什么，因为你没有成为一个FIDDLE !!! 。我让它在IE7中工作，只是为了让你知道你需要改变什么。

Fiddle

我已将.zoomImg设置为比其兄弟.div元素更高的z-index。请注意，我删除了opacity并添加了z-index。这是强制分配更高的z-index。您可以将其重新插入，但请记住 opacity在IE7中创建新的堆叠上下文。这意味着如果你给一个元素opacity，它就是z-index，它的子节点与它的当前上下文分开。欢迎来到IE7，祝你玩得愉快。

编辑：IE7需要不同的不透明属性 -

filter: alpha(opacity=50); - SOURCE

Answer 3

试试IE7.js。如果它不起作用，只需忘记支持这个过时的和错误的浏览器。