IE6,7 で a>div>img:floated なときのimgクリック出来ない問題

「a要素>div>フローとした画像やらテキストやら」みたいなとき、IE6,7だと画像部分が反応しないから、こうする。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>無題ドキュメント</title>

<style>
a{
	*zoom:1;
	background:url(http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif);
}
.container{
	position:relative;
	*z-index:-1;
	border:1px solid #000;
	height:100px;
}
.image{
	float:left;
}
</style>

</head>
<body>

<a href="http://google.com">
	<div class="container">
		<div class="image"><img src="http://dummyimage.com/100x100"></div>
		あああああああああああああああああああああ
	</div>
</a>

</body>
</html>
  1. a要素をhasLayout:true;にし、全透過GIFまたはPNGを背景とする。
  2. a要素直下のdivをz-index:-1;にする

ただし、副作用として該当箇所のテキストを選択できなくなる