IE8，定位和悬停不起作用

Question

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

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

我在这件事上做了一些研究，但没有任何进展。在 IE8 中，缩略图和放大图像都显示。 “可见性：隐藏”、“悬停”或“绝对位置”在 IE8 中似乎都不起作用。

不胜感激。以下是sn-p的代码：

.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> 元素。