posiotion: absolute;で絶対配置に固定したli属性は、IE6もしくはIE7において、display: block;が効かない？

既に、どこかで公表されているバグなのかもしれないけれど、自分がハマリにハマリ、今日一日をこれだけのために使ったと言っても過言ではないので。

こんなコードを書いていた。まず、HTML。

<div id="navi">
<ul>
<li><a href="#">ああああ</a></li>
<li><a href="#">いいいい</a></li>
<li><a href="#">うううう</a></li>
</ul>
</div>

簡単なulとliで書いたナビゲーション用のコード。次はCSS。

#navi {
	position: absolute;
	width: 240px;
	left: 21px;
	top: 411px;
	margin: 0;
	padding: 0;
}

#navi ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#navi li {
	margin: 0;
	padding: 0;
}

#navi li a {
	display: block;
	width: 240px;
	height: 35px;
	border: 1px solid #FF3300;
	margin-bottom: 33px;
}

position: absolute;でul、liを絶対配置して、その上で、リストのマーカーボックスを消して、更にa要素にdisplay: block;を指定して、リンク領域を広げるという方法。

これで、Firefoxなどのモダンブラウザは完璧にきれいに表示された。けれど、IE6、IE7共にこけた。ものの見事に。バグの部分は、display: block;でリンクの領域が広がらないというバグ。つまり、#navi li aで指定しているwidthとheightは一切適応されず、文字列の「ああああ」や「いいいい」の領域にしかリンクが生きてこない。ちなみに、border自体はちゃんとwidthとheightの指定どおりに、表示される。が、リンクだけが全くダメ。

で、こういったコードに近いものを書いたことがある人も多いと思うのだけど、これが引っ掛かる部分はどうやら#naviにposition: absolute;を指定しているからのよう。実際、position: absolute;とそれに関連するコードを取った際は、IEの両バージョンでも問題なく表示できた。要は、絶対配置でliを並べる時は、display: block;でリンク領域を広げることは無理だってこと。僕も仕方がなく、HTML側に通常の画像をimg srcで入れ込むことにした。

IE6はまあ仕方がないにしても、最新バージョンであるIE7で引っ掛かるのはどうなんだろう。肝いりで発表され、CSS実装もIE6に比べればちゃんとしていると言われながらも、いきなり僕は躓いた。本当に、嫌になる。