IE8，定位和悬停不起作用

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

它看起来像这样：

不要那样做。

元素不存在。即使在 XHTML 中，您也不能只编写自己的元素；您还需要编写自己的元素。无论如何，如果不创建自定义 DTD，这可能仍然无法使其在 IE 中工作，因为 IE 并不真正支持 XHTML。

Chrome 和 Firefox 在处理无法识别的元素方面比 IE8 宽松一些，这就是它在这些浏览器中工作的原因。

我建议您向图像添加一个 bigger 类： 并删除 元素。