0

我正在使用JQuery 插件进行图像缩放，在 IE7 中无法正常工作，缩放图像的位置不同。

在火狐中：

在此处输入图像描述

在 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

CSS 语句将display:inline-block元素显示为内联级块容器。该块的内部被格式化为块级框，元素本身被格式化为行内级框。尝试解决这个问题，在 IE7 和更早版本中，这个属性是已知的错误。

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

于 2013-11-14T09:51:17.410 回答
0

So, IE is fun. IE7 and older handle z-index slightly differently to newer browsers (Reference).

In IE7, each element with an assigned z-index creates a new stacking context. This means any elements z-index nested within it are stacking in relation to the parent element. A simple example:

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

In this example, #para-two would be above #para-one. "But #para-one has a huge z-index, it must be above everything". #container-one has a z-index lower than #container-two. They are now separate stacking contexts.

#para-one's z-index is only in relation to everything within #container-one. Also, for extra fun, opacity creates a new stacking context as well!!

Ok, for your code, I had to guess a little as to what the full html was because you didn't make a FIDDLE!!!. I got it working here in IE7, just to give you an idea as to what you need to change.

Fiddle

I've set the .zoomImg to have a z-index higher than it's sibling .div elements. Note, I removed opacity and added a z-index instead. This is to forcefully assign a higher z-index. You can put it back in, but remember opacity creates a new stacking context in IE7. That means if you give an element an opacity, it's z-index and it's children are seperate from it's current context. Welcome to IE7, have a nice time.

EDIT: IE7 needs a different property for opacity --

filter: alpha(opacity=50); - SOURCE

于 2013-11-14T10:15:59.413 回答
-1

试试IE7.js。如果它不起作用，只需忘记支持这个过时且有缺陷的浏览器即可。

于 2013-11-14T09:47:54.347 回答