css - 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 应该是一个元素或一个类。如果它是一个类，它应该是 .bigger ，对吧？