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

Question

I have 3 images. When hovering one an image goes on top of the hovered one.

Here's my code: HTML

<a class="toggle"><img src="" style="position:absolute"><img src=""></a>
<a class="toggle" style="margin-left:30px;margin-right:30px"><img src="" style="position:absolute"><img src=""></a>
<a class="toggle"><img src="" style="position:absolute"><img src=""></a>

CSS

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

Everything works fine with Firefox and Chrome.. Problem is with Internet Explorer (also IE 10). The middle image is positioned weirdly!

Check out the fiddle with IE to see the problem http://jsfiddle.net/6nebL/

How can I fix this in a clean way and without adding complexity to the code?

Answer 1

set a to inline-block :

a {
    display: inline-block;
}

fiddle updated: http://jsfiddle.net/6nebL/3/

Answer 2

Here, I've updated your CSS and HTML to be a bit more ... friendly. The 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;
}

And HTML is just without the inline styles.

Here is the updated jsFiddle.