先日、会社帰りのはなこさんが「“紆余曲折”のサイトのレイアウトがおかしいよ」と一言。

すぐになんのことか分かった。

会社のPC(Windows XP)はずっとイントラネット環境であったため、いわゆる“ガラパゴス”状態になっていた。

半年ほど前に会社全体のネットワームシステムを大幅に変更し、インターネットとも接続できるようになったのだが、誰もブラウザのバージョンアップをしなかったのだろう。

そう、会社のPCのブラウザの多くは未だに“Internet Explorer 6”のままなのである。

バージョン別 ブラウザシェアグラフ
http://lhsp.s206.xrea.com/misc/browser-share-version.html

上記のサイトをご覧になるとよく分かるのだが、日本国内においてブラウザのシェアはやはり圧倒的にIEの独り勝ち状態になっている。しかし、ことIE6となると全体の2.74%しか占めていない。

ところが、ボクが作った会社のサイトに訪れるユーザーに関してGoogle Analyticsで調べてみると、IE6のシェアは6.14%という数字になっている。

この“2.74”と“6.14”のズレは、「社内から閲覧するユーザーが含まれている」というのが最も大きな理由としてあげられるが、だとしてもこの数字は“会社のサイト”として無視できる数字ではない。

ということで、会社のサイトはいわゆる“cssハック”を駆使して少なくとも6以上のIEと他のモダンブラウザ(chrome、firefox、safariなど)でなるべく差異のないように作成している。

今のところ、MicroSoftもかなり頑張ってくれているようで、少なくともボクが手掛けたサイトではIE8とIE9に関しては特にハックを使わなくても他のモダンブラウザと同様に表示されるが、IE6とIE7はとても厄介。特にIE6は悲惨。

html文書は、通常DOCTYPE宣言をする必要があり、このDOCTYPE宣言の内容によってブラウザがcssの標準に準拠する“標準準拠モード”でhtmlをレンダリングするのか、古いhtmlのバージョンで書かれたページも表示できる“後方互換モード”でレンダリングするのかが決まる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ところが、IE6は“文書の先頭”にDOCTYPE宣言をしないと、DOCTYPE宣言の内容に関わらず自動的に“後方互換モード”が発令されてしまう。

一方、ボクはhtmlのソースはxhtmlで記述しているのだが、xhtmlはxmlで定義された言語であるため、validなソースにするためには“なによりも先にxml宣言をする必要がある。

<?xml version="1.0" encoding="utf-8"?>

従って、IE6がxml宣言されたhtml文書に出くわすと“文書の先頭”にDOCTYPE宣言がないため“後方互換モード”になってしまい、その結果cssを使ったレイアウトが著しく崩れてしまう。(まあこのあたりの話はウェブ上でさんざん議論されている話ですが。)

標準モードと互換モードについて
http://www.dspt.net/html_tag/mode.html

ボクの場合はphpの“$_SERVER['HTTP_USER_AGENT']”を使ってブラウザを判別し、“IE6以下の場合にはxml宣言をしない”ことで対処をしている。

$ua = $_SERVER['HTTP_USER_AGENT'];
if (!(ereg("Windows",$ua) && ereg("MSIE",$ua)) || ereg("MSIE 7",$ua) || ereg("MSIE 8",$ua) || ereg("MSIE 9",$ua)) {
  print "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
}

でもだからといってそれで全てが解決するわけではないんだな、コレが。

“後方互換モード”が発令されなくても、細かいところでcssの解釈がIE6、IE7とIE8以降では異なる。(異なるというか、古いバージョンでは“理解できない”と言った方が正しいか。) 下記サイトに詳細が記載されている。

CSS Differences in Internet Explorer 6, 7 and 8
http://coding.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

あと、かなり古い記事だけど、かなり笑わせてもらった記事がコチラ。

CSSで見る、IE7。
http://labs.unoh.net/2006/09/ie7_css.html

Microsoftの開発者たちによるIEブログでは、このサイトで指摘された問題をほぼ全て解決!と言っています。

まあ、結局のところ本当に“問題をほぼ全て解決!”できたのはIE8になってからなんすよねえ。

とにかく、IEの8より前はウザい。

話がそれてしまった。

えっと、何だっけ?

そうそう、だから会社のサイトはcssハックを駆使して、IE6とIE7のバグに対処している、って話ですよね。

で、この“紆余曲折”のサイトなんですが。

完全に、IE6とIE7を無視して作っていました。

はなこさんが会社で見たときにレイアウトが崩れていたのは、そのせいです。

だって、コンテンツさえ揃ってなかったんだもの。

ここにきて、ようやく“カブトムシ飼育の紆余曲折”も稼働しだしてコンテンツも揃ってきたから、そろそろcssハック使おっかな、、、て思ってみたりします。

でも今日はもういいや。明日にしよう。

明日は“cssハック”に関する記事になると思いま~す。

じゃあ、寝ま~す。