Html 位置：绝对“；背景“；图像Internet Explorer问题

我有3张照片。当悬停其中一个图像时，图像将位于悬停图像的顶部

这是我的密码： HTML

Firefox和Chrome的一切都很好。。问题在于Internet Explorer（也就是IE 10）。中间图像的位置很奇怪

查看IE的小提琴，查看问题

---

如何以干净的方式修复此问题而不增加代码的复杂性？

将

a

设置为

内联块

：

a {
    display: inline-block;
}

小提琴更新：

---

在这里，我已经更新了您的CSS和HTML，使其更加完善。。。友好的。CSS：

.toggle img:hover {
    opacity:0.1;
    filter:alpha(opacity=10); /* For IE8 and earlier */
}

.toggle {
    display:inline-block;
    vertical-align:middle;
    width:150px;
    position:relative;
    margin:0 30px;
}

img {
    position:absolute;
    top:0;
    left:0;
}

HTML只是没有内联样式

---

您是否尝试过声明X&Y坐标，这被认为是正确的声明<代码>位置：绝对；排名：0；左：0，我猜。老实说，直列式风格？简单而有效！：D

a {
    display: inline-block;
}

.toggle img:hover {
    opacity:0.1;
    filter:alpha(opacity=10); /* For IE8 and earlier */
}

.toggle {
    display:inline-block;
    vertical-align:middle;
    width:150px;
    position:relative;
    margin:0 30px;
}

img {
    position:absolute;
    top:0;
    left:0;
}