非リンク画像にポップアップ、ブラウザでの違い

質問

質問、失礼いたします。
htmlとCSSで、画像のポップアップを作っています。

ソースは下記の通りです

■HTML部分
<a class="thumbnail" href="xxx">
<img src="xxx" border="0" />
<span><img src="ooo" /></span>
</a>

■CSS部分

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}

■サンプル掲載サイト
http://akifumih.seesaa.net/article/111153756.html

このコードを使い、HTML部分のリンクを外し
<span class="thumbnail">
<img src="ｘｘｘ" />
<span><img src="ooo" />
</span>
</span>

として、Chromeで確認したら問題なかったのですが、
IEの場合、ポップアップをしなくなっていました。

この2つのブラウザで見た場合、どうして異なるのかが不明で
ご存じの方がいらっしゃいましたら、ご教授お願い致します。

回答No.1

naokita · ベストアンサー

IEは、
　a:hover にしか対応しないバージョンがあるから
　互換性も考慮したら、<a>でマークアップするか、JSを使うしかない。

CSSなら下記の様な感じで、IE6にも対応する。

<p class="tips1" id="tips1" style="margin: 0; padding:0;">
<a href="#tips1" class="tips2"><img src="xxx">
<span><img src="ooo"></span></a>
</p>

.tips1 a{ text-decoration: none;}
.tips1 a img{ border:0;}
* html .tips1 a:hover{ background:lightyellow;}
.tips1 a.tips2 span{ display:none; background:lightyellow;}
.tips1 a.tips2:hover span{ display:inline; position:absolute; padding:5px; margin: 20px 0 0 -20px; border: 1px dashed gray;}

お礼

ありがとうございました!!