FC2ブログにおけるCSSハック

こんにちは。

今日はプランター菜園とはちょっと離れて、CSSハックという技術について書いてみたいと思います。

一般に、ブラウザによってWebの見え方が違うというのは仕方が無いことではありますが、特に、新しくしたテンプレートでは、ブラウザの違いによるレイアウト崩れが気になっていました。

Internet Explorer8(以下、IE8)
InternetExplorer8
Mozilla Firefox3
Mozilla Firefox3
Opera11
Opera11
Safari5
Safari5
GoogleChrome8
GoogleChrome8

主なブラウザの最新版で表示を比べると…

1. IE8だけ、トマトやかぼちゃのリストアイコンと文字の間にスペースがなく、ちょっと変。
2. OperaとIEは行間がやや狭めで、その他はやや広め。
3. Operaはアイコンの位置が文字位置と揃っていてきれいですが、他のブラウザではアイコンの頭がちょっと飛び出している。
4. IE8だけpadding(枠とトマトの距離)が広くなってしまっている。

これを解決しようと思って、例えば、IE8で適正に表示されるように普通にline-heightを調整すると、こんどはFirefoxで行間が広くなりすぎてこれまた変になってしまうので、公開時のテンプレート(上のSS)は、IEにしてはやや狭く、Firefoxにしてはやや広めとなる行間を設定するしかありませんでした。

この問題は、CSSハックという技術(バグ)を使って、ブラウザごとに適用されるプロパティを変えることによって解決することが出来ましたのでちょっと紹介します。

IE8用のCSSハックとして一般的な構文は…

html>/**/body セレクタ  {
line-height:3\9;
}

だと思いますが、これはどういうわけかどうやってもFC2ブログでは適用されませんでした。
結局かなり試行錯誤してうまくいったのは、もっとシンプルな以下のやり方です。

セレクタ {
line-height:1.0;
line-height:1.24\9;
}

上の行で全てのブラウザに行間1.0という値を渡しますが、IEだけは下の行を読み込んで、行間が1.24に上書きされるので結果的に、IEだけ行間を広くすることが出来るという訳です。
(他のブラウザでは1.24\9という表記が理解不能なため無視される、IEで解釈される1.24がFirefoxの1.0相当の行間)

おそらくFC2固有の問題だと思いますが、これでなんとか解決できました。

あとは同様に、
IE特有の見え方(padding, marginなど)を調整すれば、この通り!

CSSハック適用後の見え方
IE8(左CSSハック前、右CSSハック後)*狭すぎた行間を開き、トマトを左に寄せました。
IE8CSSハック前後比較
Mozilla Firefox3(左CSSハック前、右CSSハック後)*広すぎた行間をやや狭くしました
Mozilla Firefox3CSSハック前後比較

右側の画像の上下で見比べていただくと分かると思いますが、ほぼ外観をブラウザ間で統一することが出来ました。

ただ、トマトの後のスペースについては…結局うまく調整出来ませんでした。

こんな記事を書いている私も実はこの分野はあまり詳しく無いのですが、なかなか奥が深い技術だと思います。。。

*ちなみに、このブログを見ている方はIEかFirefoxが大半であることからOpera向けの最適化は行っていませんのであしからず…(行間がかなり狭いです)。
*便利な技術ですがブラウザのバージョンが変わるたびに対策しなければいけないのが難点です。
*CSSハック無しで公開後、翌日CSSハック対応のテンプレートに差し替えました。