JQuery缩放IE7 css绝对定位误差
我使用的是用于图像缩放的JQuery插件，它在IE7中不能正常工作，放大图像的位置是不同的。
火狐中的：
in 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;}回答 3
Stack Overflow用户
发布于 2013-11-14 09:51:17
display:inline-block CSS语句将元素显示为内联级块容器。该块的内部被格式化为块级框，元素本身被格式化为内联级框。尝试玩这个，它是已知的错误在IE7和更早与此属性。
还有一件事，正如插件网站上所说:兼容: jQuery 1.7+ in Chrome，Firefox，Safari，Opera，Internet 7+。因此，显然插件在IE7之上的浏览器中起作用。
Stack Overflow用户
发布于 2013-11-14 10:15:59
所以，IE很有趣。IE7和旧版本的处理z索引与较新的浏览器(参考文献)略有不同。
在IE7中，每个带有指定z索引的元素都会创建一个新的堆叠上下文。这意味着嵌套在其中的任何元素z索引都与父元素相关联。一个简单的例子：
<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指数，它必须高于一切”。#container-one的z指数低于#container-two.它们现在是单独的堆叠上下文。
#para-one的z索引仅与#container-one中的所有内容相关。此外，为了获得额外的乐趣，opacity还创建了一个新的堆叠上下文！
好的，对于您的代码，我不得不猜测一下完整的html是什么，因为您没有做小提琴！。我让它在IE7里工作，只是想让你知道你需要改变什么。
小提琴
我已经将.zoomImg设置为具有比同级.div元素更高的z索引。注意，我删除了opacity并添加了一个z-index。这是为了强制分配一个更高的z-index。您可以把它放回去，但是请记住，opacity 在IE7中创建了一个新的堆叠上下文。这意味着如果您给一个元素一个opacity，它就是z-index，它的子元素与当前上下文分离。欢迎来到IE7，祝您玩得愉快。
编辑: IE7需要一个不同的不透明度属性
filter: alpha(opacity=50); - 来源
Stack Overflow用户
发布于 2013-11-14 09:47:54
试试IE7.js。如果它不能工作，只需忘记支持这个过时和错误的浏览器。
https://stackoverflow.com/questions/19974181
复制相似问题
腾讯云开发者
