CSSの「position:absolute;」属性について

質問

どうしても理解できませんので、どうかお力添えをお願いいたします。
以下のかんたんな“カテゴリー”を、ＨＴＭＬとＣＳＳで作成しました。

-------------------------------------------------------------------
（ＨＴＭＬ）
<div id="navi">
<div id="kategory">
<a href="http://～">テスト１</a>
<a href="http://―">テスト２</a>
</div>
</div>
-------------------------------------------------------------------
（ＣＳＳ）
#navi{
width:180px;
}　（幅１８０ｐｘのＢＯＸを作成）

#kategory a:link, #kategory a:visited{
display: block;
background-color:red;
border:solid 1px;
}　（マウスカーソルがのっていないとき、背景色は赤色）

#kategory a:hover{
background-color:green;
}　（マウスカーソルがのっているとき、背景色は緑色）
--------------------------------------------------------------------
「firefox」では問題なかったのですが、「Internet Explorer」ではリンク文字のところにカーソルをもっていかないと、背景色が赤色から緑色に変化しませんでした。
いろいろと調べてみた結果、

「position:absolute;
　top: 0px;」

をＣＳＳの「#navi」のなかに書きたすことで、リンク文字以外の箇所にマウスをもってきても背景色が赤色から緑色に変化するようになりました。

どうして「position:absolute;」という属性を使うことにより、リンク文字以外のところへカーソルをもってきても、赤色から緑色へ変化するようになるのでしょうか？

どうか、よろしくお願いいたします。

回答No.1

leap_day · ベストアンサー

こんにちは

Internet Explorerのバグです

http://www6.plala.or.jp/go_west/nextcss/tip/tech/sidemenu.htm

親要素に幅が設定されていないとそれでもできるのですが幅が指定してある場合にはテキスト部分しか判定されないようです

<a>に幅をつけることで解消します

#kategory a:link, #kategory a:visited{
display: block;
width:178px;
background-color:red;
border:solid 1px;
}

※border分2pxがありますのでそれを引いた178pxとなります

position:absoluteすることでおそらくwidth:180pxが100％となるので親要素の幅が指定されていない状態になりできるのではないかと思います(推測ですが（－－；）

試しに↓のようにするとposition:absolute;していても同じ状態になります

<style type="text/css">
#navi{
width:180px;
position:absolute;
}
#kategory a:link, #kategory a:visited{
display: block;
background-color:red;
border:solid 1px;
}

#kategory a:hover{
background-color:green;
}
--></style>

<div id="navi">
<div id="kategory">

<div style="width:100px">
<a href="http://～">テスト１</a>
<a href="http://―">テスト２</a>
</div>

</div>
</div>

お礼

leap_dayさんへ

なるほど！　インターネットエクスプローラーのバグだったのですね。
たいへんわかりやすい説明をありがとうございました。スッキリしました。
リンク先のＵＲＬも理解しやすかったです。