Web標準をさまたげるブラウザーのCSS解釈 見栄えのためのCSSハック…

会社設立に合わせてメインサイトと2ブログを外注したのだが、あらためて思い知ったのがブラウザごとのレンダリングの違いである。

サイトの納品が完了し、こちらでCSSを少し自分用にいじってみて、あらら表示がおかしくなったという場面に出くわす。

しかも、今はブラウザーの乱立時代、OSはWindowsが圧倒的なシェアであるものの、IEの6と7、Firefoxの2と3と、それぞれがある程度のユーザーを持っているから厄介である。

新SEOブログのブラウザーシェア

この新SEOブログは、8月13日からアクセス解析を導入している。

アクセス数は12,000ほどである。

まずOSのシェアはWindowsが圧倒的ではあるが、当ブログではやはりXPがVistaの4倍以上である。

当ブログに限ってかもしれないが、IE対Firefoxが2:1と後者が普通に考えられているより多い。

Vistaの場合、IEは7もしくは8ベータになる。
XPユーザーが多いので、IEも6の方がわずかながら7を上回っている。

上図のように、ブラウザのシェアは複雑だ。

つまり、IEの6と7、Firefoxの2と3に対応させなければならないのである。

どれもがWeb標準そのままレンダリングしてくれるならば問題がないのだが、それぞれ微妙なクセがある。これが難儀するのである。

blockquoteとcaptionに悩まされる

もはやこちらで例を作成しないので、各自自サイトででも確認していただきたい。

Internet Explorer (Windows) CSSバグリスト：左右ボーダーとパディングを設置した要素に後続する部分がずれる(5.5/6.0)

最後の子要素が非匿名ブロックレベル要素である要素の四方にパディングを設置し、さらに左または右にボーダーを設置すると、その要素に後続する要素の内容物がボーダーを設置した方向にずれてしまう。

またIEか! と怒りがこみ上げてくるのだが、Firefoxも優等生ではなかった。

table と caption の margin | d-spica

Firefoxの場合，table の margin-top が caption との間に入っています。

こうしてみると，Firefox，Opera，Safari とも仕様のとおりにレンダリングされてはいませんね。

構造をHTML(XHTML)、表示をCSSというのがWeb標準であるのに、見栄えのためにCSSをハックしたり余計なことに悩まされる、何というアイロニー。