当初、やる必要は特にないけど、簡単に出来るだろうなと試してみたら
IE(tester)の7と6で全く思い通りにいかなかった
(IE6はdisplay:inline-block;、IE7はdisplay:inlineじゃなければポップアップが反応しなかったのでハックを使ったり
cssの指定も、ポップアップさせる要素の親ブロックからカスケード指定してこなければ反応しなかったり)
ので、挙動の違いをメモしておこうと、これを書いてたけど
何種類かサンプルを作って何度か書き直してるうちに、
IE6もdisplay:inlineでOKだったり、親要素から指定しなくても問題なかったり混乱する結果ばかり
そして最終的には全然シンプルに出来た。
なのでメモの必要もない感じになってしまったけどせっかくなので
以下、サンプルと気を付けた事、気づいた点のメモ。
サンプル
IE8やFirefox3、chromeでやるにはとてもシンプル。
test1:IE7以下を対象から外したサンプル
test2:IE7以下も対応
気を付けた事、気づいた点
ポップアップさせる要素に.popupというclassを付与した場合
a:hover, a:hover .popup
みたいにa:hoverも指定が必要だった。
:hoverのdisplayの代わりにbackgroundに何か指定してもOKだった。
haslayoutが関係してるのかなとzoom:1を使ってみたところ
IE7でポップアップが消えなかったり希望した動きにならなかった。
関連記事かもしれん:
乱雑モックアップのフィード