リンクの<a>タグの中にブロック要素を入れ、そのなかへ画像をいれると
IE6と7では画像の部分をクリックしてもリンク先に遷移しなくなる。
たとえばこんな感じのメニュー。
<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>
#navigation { display: block; border: 1px solid #000; border-left: none; } #navigation:after { content: ''; display: block; clear: both; height: 0; width: 0; } #navigation li { display: block; float: left; border-left: 1px solid #000; } #navigation li a { display: block; border: 1px solid #eee; } #navigation li a span { display: block; text-align: center; border-top: 3px solid #ccc; padding: 1em 0; width: 6em; } #navigation li.current a span { border-color: #f00; }