位置：絕對“背景”圖像Internet Explorer問題

Question

我有3張圖片。 當懸停一個圖像時，會在懸停的圖像上方移動。

這是我的代碼：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 */
}

Firefox和Chrome一切正常。問題出在Internet Explorer（也是IE 10）上。 中間的圖像很奇怪！

看看IE的小提琴，看看問題http://jsfiddle.net/6nebL/

如何以干凈的方式解決這個問題並且不增加代碼的復雜性？

Answer 1

設置a至inline-block ：

a {
    display: inline-block;
}

小提琴更新： http ： //jsfiddle.net/6nebL/3/

Answer 2

在這里，我已經更新了你的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沒有內聯樣式。

這是更新的jsFiddle。