CSS

これは知らなかったなー。

外部ライブラリは敬遠してたけど、どんどん使うべきだと思うようになってきた。

これは面白いですね。画像の変更にも耐えられるし運用面がとても優れていると思います。

これはバグなのか?と思いつつ、結局こちらの方法で解決。こんなのよく解決したなぁ。知り尽くしてますねぇ。

まさかposition:relative;がie7のzoom機能に影響してるなんて。親ボックスにposition:relative;当てたら一発で直りました。

↓とりあえず、タイトルがすごくながい。今まで見た中で一番か二番に長いかもしれない。

今日いじっているhtmlが、実はよく見るとdoctype宣言がない状態とほぼ等しい宣言だった。。。つまり後方互換モードになっていました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

↑ほぼすべてのモダンブラウザが後方互換モードになる。

↑この互換モードの一覧表を見ると、一目瞭然。この宣言だと表のすべてのブラウザで後方互換モードになる宣言のようだ。

そして、後方互換モードだと、:hoverなどの疑似要素はliなどの普通のタグでは効かなくなる。

firebugで一生懸命クラスを探しても認識されていないcssは表示されない。
このことから:hoverがブラウザに認識されていないことがわかる。

結論

後方互換モードで疑似要素を使う時はaタグなら動きます。

あわせて読みたいブログパーツ