リンクの<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;
}