IE6と7でリンクの中の画像をクリックできない

リンクの<a>タグの中にブロック要素を入れ、そのなかへ画像をいれると
IE6と7では画像の部分をクリックしてもリンク先に遷移しなくなる。

たとえばこんな感じのメニュー。

</p>
<ul id="navigation">
<li class="current"><a href="/"><span><img src="home.gif" alt="home" /><span></a></li>
<li><a href="/service/"><span><img src="service.gif" alt="service" /><span></a></li>
<li><a href="/products/"><span><img src="products.gif" alt="products" /><span></a></li>
<li><a href="/contact/"><span><img src="contact.gif" alt="contact" /><span></a></li>
</ul>
<p>

#navigation {<br />
	display: block;<br />
	border: 1px solid #000;<br />
	border-left: none;<br />
}<br />
#navigation:after {<br />
	content: '';<br />
	display: block;<br />
	clear: both;<br />
	height: 0;<br />
	width: 0;<br />
}<br />
#navigation li {<br />
	display: block;<br />
	float: left;<br />
	border-left: 1px solid #000;<br />
}<br />
#navigation li a {<br />
	display: block;<br />
	border: 1px solid #eee;<br />
}<br />
#navigation li a span {<br />
	display: block;<br />
	text-align: center;<br />
	border-top: 3px solid #ccc;<br />
	padding: 1em 0;<br />
	width: 6em;<br />
}<br />
#navigation li.current a span {<br />
	border-color: #f00;<br />
}

関連記事