まず最初に見つけたのが、以下のサイト。

» IEで position:absolute した要素が消えるバグ

こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う～ん、なぜだ・・・

日本語のリソースを調べてみても解決策が全然見つからないので、英語のリソースを探してみたところ、ずばりなページを発見しました。

» IE/Win: Disappearing position:absolute boxes near to floats and clears

なかなか興味深い内容だったので、このページをもとに自分でもテストをしてみました。その結果をまとめたのがこちらです。

» Win/IEで絶対配置（position: absolute）のボックスが消えるバグの検証ページ

（なお、内容がほぼ同じということで、公開にあたってオリジナルページの作者である Bruno Fassino 氏にメールで許可を求めたところ、快諾とともにいくつかアドバイスまでいただきました。あらためて感謝いたします。Thanks Bruno! ）

整理すると、次のケースで position:absolute のボックスが消えるようです。

• position:absolute が float と hasLayout をもつ clear の直前に存在する場合。
• position:absolute が float と hasLayout をもつ clear との間に存在する場合。
• position:absolute が width:100% の float の直前に存在する場合。（IE6以下のみ）
• position:absolute が width:100% の float の直後に存在する場合。（IE6以下のみ）

それぞれの対策はいろいろあるので、詳しくはテスト結果のページをご確認ください。オリジナルにはないものもいくつか存在しています。なお、hasLayout についてはこのあたりが詳しいです。

» IEでのCSSのバグを回避するhasLayout | コリス
» ウノウラボ Unoh Labs: hasLayoutとは何か

しかし、IE はいろいろと厄介ですねぇ・・・

おまけ

日本語でこの問題を取り扱っているサイトがあまりないのはなぜでしょうね？position:absolute をあまり使わないからそもそも出くわさないとか？みんな position が苦手なのかなぁ。ちなみに私も最初はちんぷんかんぷんでしたが、ホップ本（再出版バージョン）で完全に使いこなすことが出来るようになりました。えっへん。

実はこの4つの擬似クラスの記述順序には注意が必要で、上記のように link、visited、hover、active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。

なぜこの順番じゃなければダメなのか？

実践Web Standards Design（通称ホップ本）には、次のように書かれています。

:hover擬似クラスと:active擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効にならない点に注意してください。

「3章 3.3/CSS管理のコツ」より

擬似クラスの記述順序には注意が必要です。（略）常に最後の指定で上書きされるということに注意し、link、visited、hover、active の順番で記述しておくと問題ないでしょう。逆に、すでに訪問済みのリンクは背景画像を変えたくないということであれば、visited を最後に記述するとよいでしょう。

「7章 16/背景画像を利用して訪問済みリンクを一工夫する」より

擬似クラスの記述順序にルールがあるというのを知ったのは、実はこの本がきっかけでした。それまでは「hover が効かない！」とか「訪問済みのリンクの色が変わらない！」とかいった問題に出くわしてハマッた経験が何度かあったので、書く順番が原因だったことがわかったときは思わず「そうだったのか！」とひざを打ってしまいました。

で、勢いづいてもう少し調べてみると、CSS の権威である Eric Meyer 氏のサイトでも同じ内容に関する解説を見つけました。

» Link Specificity – meyerweb.com

カンタンにまとめてみると、

• セレクタの固有性（specificity）は4つとも同じ。
• なので、最後に書かれたものから優先的に適用される。
• 例えば、link、active、hover、visited の順番で記述しているとすると・・・
• 未訪問リンクの場合は、active を hover が打ち消すので active は無効になる。
• 従って、active は hover の後ろに記述しなければならない。
• 訪問済みリンクの場合は、active も hover も一番最後の visited が打ち消してしまって無効になる。
• 従って、visited は hover や active の前に記述しなければならない。
• つまり、link、visited、hover、active の順番で書くべし。
• ちなみに、link と visited は打ち消しあうことがないので順番はどっちでもOK。
• link はあくまで「未訪問（unvisited）」のリンクのみに適用される擬似クラスで、「リンク全般」に適用されるものじゃないので要注意。
• link じゃなくて unvisited にすればいいのにね。

順番の覚え方

海外では、この記述順序ルールを link-visited-hover-active の頭文字をとって「LVHA」と言うようです。ちょっと覚えづらいなぁと思っていたのですが、たまたま見かけた海外のブログにうまい覚え方が紹介されていました。

» How To Remember The Order of Selectors: LOVE and HATE – CSS Tricks

Just think ‘LOVE’ (LV) and ‘HATE’ (HA)….

LOVE and HATE かぁ。ちょっと意味深だし覚えやすいですね。

他にも「こんなふうに覚えてるよ」というのがあれば是非教えてください。live happily とかどうかな？

擬似クラスが <a> 以外では適用されません。が、この問題の解決策が紹介されているサイトを発見しました。

» WEBFACTORY ::: BLOG: IEでhoverをa以外に効かせる
» Hackadelic: csshoverを使ったWeb StandardなCSSコーディング

それぞれで紹介されているとおり、Whatever:hover で配布している csshover.htc というスクリプトを使えば、IEでもいろんな要素に:hoverを適用させることが出来ます。（ダウンロードの場所がちょっとわかりづらいですが、Changes のなかにあります。）

使い方は、css で以下のように書くだけ。

これで、IEでも hover し放題です。素晴らしい！

が、Web標準の教科書という本を読んで、目からうろこが落ちました。

（pre要素の解説で）

pre要素は、code要素と組み合わせてスクリプト言語やプログラミング言語のソースコードを示すのに使うのが一般的である。

（code要素、var要素、samp要素、kbd要素の解説で）

コンピュータに特有のテキストを定義するには、次の4つの要素を使用する。
（略）
これらはインライン要素であり、インライン要素やテキストを含むことができる。

そうだったのかー！code要素はインライン要素なので、半角スペースや改行が反映されないのは当たり前なのでした。つまり、ソースコードをWebページで表示させるには、

<pre><code>
function someFunction() {
    // code
}
</code><pre>

というふうに、pre要素の中にcode要素を含ませて書くのが正しいようです。ちなみにcode要素はインライン要素なので、次のような書き方もできます。

<p>1行目の<code>someFunction()</code>の中にコードを実装していきます。</p>

なお、<pre>…</pre>を使うと、一行が長い場合、

function someFunction() {
    // code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code
}

という感じで、横スクロールバーが表示されてしまいますが、以下のサイトで紹介されているcssハックを使えば、折り返すことができます。

» Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE

最近になって、ようやくWeb標準の勉強を始めたのですが、新しい発見がいっぱいあって楽しいです。