vertical-align｜IEとOpera の場合

稚拙のプラグイン「NP_OnlyImg」を作った動機をすっかり忘れていたのですが、先日ふと思い出し即実行。カテゴリー一覧、タグ抽出画面に記事内の画像をアイコン化して表示しました。文字列だけだったカテゴリー一覧ページがかなり楽しくなったと自負しております。特に Mac 一覧は気持ちいいです。Book や Movie もいいですね。自分が読んだ本や見た映画の表紙が一望できるのは何と幸せなことでしょう。

なんて自己満足は置いといて、意外と苦労したのが画像とテキストの位置合わせ。「vertical-align」を「bottom」にしていたのですが、IE と Opera はそれを認めてくれません。おかげでまだまだ知らない事が多いということがわかりました。「vertical-align」って数値指定もできるんですね。というかなんでできないと思い込んでいたのか…まあとにかく「%」や「px」なんかで細かい調整ができます。プラスの値で下方向、マイナスの値で上方向ですね。

まあこんなことで頑張っても、根本的に OS 間、ブラウザ間では必ず差異が出ます。特に今回のように微妙な調整はブラウザの初期値みたいなものが違う為、まったく同じ表示にすることは無理でした。まあ CSS ハックを使えば可能だと思いますが、そこまでするほどのことも無いし、するつもりも無いんですよね。ある程度のゆるさが楽しく Blog を続けるためのコツですね。なんて言い訳をしてみたり。

参考サイト

• 視覚整形モデル - CSS2 リファレンス

Category

• Music [15]
• Column [78]
• Mac [29]
• Web [47]