Question

我设置了一个伪画廊来显示缩略图并在缩略图上悬停时显示放大的图像。放大的图像相对于其父缩略图定位。

这适用于Google Chrome和Mozilla Firefox，但不适用于IE8。

我做了一些研究，没有取得任何进展。在IE8中，显示缩略图和放大图像。 “可见性：隐藏”，“悬停”和“绝对位置”似乎都不适用于IE8。

非常感谢任何帮助。以下是一段代码：

.main{
     float:right;
     display: block;
     Background-color:transparent;
     Margin: 20px 55px 20px 10px;
}

.main img{
     display: block;
     border:0;
}

.main:hover{
     background-color:#ffffff;
     position: relative;
     visibility:visible;
     z-index: 1400;
}

/*for bigger images*/
.main bigger {
     width: 500px;
     height: 500px;
     position: absolute;
     left: -2000px;
     visibility: hidden;
     overflow: hidden;
     background-color:transparent;
     border:0;
}

.main:hover img{
     z-index: 1400;
     position: relative;
}

.main:hover bigger{
     z-index: 1500;
     display:block;
     width: 500px;
     height: 500px;
     top: -100px;
     left: 200px;
     overflow: visible;
     visibility: visible;
     background-color: transparent;
     clear: none;
}

感谢

Answer 1

/*for bigger images*/ 
.main bigger { width: 500px; height: 500px; position: absolute; left: -2000px; visibility: hidden; overflow: hidden; background-color:transparent; border:0; }

.main:hover img{ z-index: 1400; position: relative; }

.main:hover bigger{ z-index: 1500; display:block; width: 500px; height: 500px; top: -100px; left: 200px; overflow: visible; visibility: visible; background-color: transparent; clear: none; }

更大应该是元素或类。如果它是一个类，它应该是 .bigger ，对吧？

Answer 2

它看起来像这样：<a class="main" href="#"><img src="" /><bigger><img src="" /></bigger></a>

不要那样做。

<bigger>元素不存在。即使在XHTML中，你也不能仅仅构成自己的元素;不是没有创建自定义DTD，这可能仍然不能使它在IE中工作，因为IE 真的支持XHTML。

Chrome和Firefox在处理无法识别的元素方面比IE8更宽松，这就是为什么它适用于那些。

我建议您在图片中添加bigger课程：<img src="" class="bigger" />并删除<bigger>元素。

IE8，定位和悬停不起作用

2 个答案: