IE6でaタグのブロック要素にマウスカーソルを反応させる方法

aタグをブロック要素にしてwidthとheightを指定すると、指定した領域にマウスカーソルが反応してくれるはずなんですが、IE6が反応してくれないという悩ましい状態に陥った事がありませんか？

このブログの右サイドのメニューが、まさにその状態だったりして…

で、なんとかIE6でもマウスカーソルを反応させようと、いろいろやってみたら上手くいったのでメモ。
以下、コード抜粋。

div#sidebar li {
	width: 170px;
	color: #666666;
	font-size: 0.75em;
	vertical-align: bottom;
}

div#sidebar li a {
	display: block;
	position: relative; /* for IE6 */
	padding: 8px 5px 5px;
	color: #666666;
	background: url(images/sidemenu_list.jpg) left top no-repeat;
}

テキスト量によって高さを可変させるためにheightを指定できなかったのが、そもそもの原因かな？とりあえず、position: relative;を追記する事で、IE6でもモダンブラウザと同様にマウスカーソルが反応するようになりました。

ただ、理屈がわからないんですよね…結果オーライ？（オイ

Social Bookmark :
Category : CSS | Permalink |