ブラウザ互換性
Mac IEをご利用の方へ
IEのレンダリング（おそらくCSSの解釈）の問題で、正常にレイアウトされて表示されません。表示されないということではないのですが、解決まで少し時間がかかるかもしれません。
introduction
このwebサイトの動作確認は以下のブラウザで行っている。
- Opera 7 for windows beta1
- Opera 6.05 for windows
- Mozilla 1.2b
- Internet Explorer 6.0 SP1
- Internet Explorer 5.5 SP2
- Internet Explorer 5.0
- Internet Explorer 4.72
- Netscape 7.0
- Netscape 6.2
- Netscape Communicator 4.78
- Mac IE 5.1
基本的にはOperaを標準のブラウザに見立てHTMLを書き、Operaで確認後、Mozillaでミスを補うという方法で行っている。IEで動作確認を行っているのはIEのブラウザの占有率が90%という事実から、大多数のユーザを無視することはできないからだ。
僕はMacを持っていないので実際にはMac環境では殆ど確認できていない。職場にあるMacでたまに見ているというのが現状なので、細部に渡って確認しているわけではない。そのため、ところどころで表示が崩れているところがある。
******
レイアウトをCSSに依存している以上、CSSをサポートしていないブラウザ（Lynxといったテキストブラウザ）では意図したレイアウトでは表示されない。また、CSSの実装が中途半端なブラウザ（現時点で最もwebmaster泣かせのNetscape 4.xやIE3,4、Mac IE4.5）でも然り。
CSSのサポートが格段に強化されたIE5以降でも、5.0と5.5、そしてIE最新バージョンである6.0でもCSS実装の違いで表示のされ方が変わってくる。しかし、レンダリングエンジンにGeckoを使うNetscape 6.xや7、MozillaではCSSを実直にサポートしているので、どのブラウザでもほぼ同じようにレンダリングされている。
第3のブラウザOperaではW3C勧告に忠実になろうと努め、早くからCSS対応を進めてきた結果、正しく書かれたHTMLのレンダリングにはなんの問題もなく、意図されたレイアウト・デザインで表示できる（しかし、IEのように間違ったHTMLの補正は苦手だ）。
ちなみに各ブラウザのCSS対応に関しては日本語サイトではK@tsukun's PAGE!にあるCSS対応状況表、英語サイトではデータが少し古いがWebReview.com: Style Sheet Reference Guide Master Gridがある。
******
CSSを正しく解釈できないブラウザを結局は無視していることになるのだが、そのようなブラウザでも読むことにはなるべく支障が出ないように配慮はした。HTMLの構造では、最初にナビゲーション用メニュー、そしてコンテンツという順序に必ずなっている。
各ページにはメニューの最初とコンテンツの最初にはきちんと表示できないブラウザ向けにnon-css versionへのリンクを設けている。例えば、このページのnon-css versionはこのような感じになる。
見るとわかるとおり、オリジナルのHTMLから外部スタイルシートを外しただけのものだ。勿論、そのような手抜きではきれいに表示するということはできないが、少なくとも読むことには支障はないと思う。時間があれば、non-css versionでは表組みでレイアウトを行い、もう少し見やすくできるようにしたいとは考えている。
******
現時点で最も頭を悩ませている問題はIE 5と6のレンダリングだ。表示ができないというわけではないのだが、意図されたデザインで表示されないところが多々あること以上にスクロールが鬼のように遅くなるという現象には頭が痛い。以下にIEを始めとするとブラウザの表示の問題点を挙げる。
problems on ie
case 1 - サイトバーが表示されない
symptom
僕が確認した分にはこれはなぜかIE6で発生する。IE5.5sp2では問題なかった。トップにあるナビゲーションの用のサイトバーが表示されず、レイヤとして置かれているdivタグが覆い被さってしまっているような状況になる。OperaやMozillaではこのbugは発生しない。» see picture 1
solution
マウスのポインタをトップバーのところに持っていったり、動かすと表示されたりする。しかし、ページにはよっては逆に持っていくと消えてしまい、リンクを示す手のひらのカーソルだけが表示されたりする。» see picture 2
case 2 - ネストしたdivタグを認識してくれない
symptom
例えば、このpicture 3を見てほしい。先頭にある2002-05-31は周りより明るい色−詳しくいえば、周りは#cccのカラーに設定されているのに対して文章が書かれている部分は#dddで表示されている。しかし、その下の2002-05-29になると周りの色と同色となってしまい、区別されていない。OperaやMozillaでは正常に表示される。» see picture 4
solution
IEのレンダリングの問題なので今のところ解決方法は見つかっていない。読めないわけではないのでこのまま放置、次期バージョンで改善されていることを願う。
[2002-08-23 updated]CSSを書き直したら、IEでのこの問題は解決した。ネストされたdivのpaddingを認識できないのか、そのレンダリングに問題があったのだろう。しかし、今度はcase 1の問題が悪化。マウスを持っていくとまったく表示されなくなった。
case 3 - スクロールが極端に遅くなる
symptom
ファイルサイズが小さければこの問題は発生しないが（スクロールする必要がなければ勿論発生しようがない）、テキストファイルのサイズで30KBを越えるとかなりひどい状態になった。特にグラフィック性能の悪いPCではスクロールするのにかなりストレスになる。例えば、log | may 2002を見てもらいたい。ひどさがわかると思う。Opera, Mozillaではまったく発生しない。
原因はCSSレイアウトにある。positionにrelative属性を使うとこのような現象が起こるらしい。このbugを紹介していたページを失念してしまった。後日、調べて紹介させていただく。しかし、これもOperaやMozillaではまったく発生しない現象なので、現時点でpositionのプロパティを変更する予定はない。
# 皮肉なことにこのページがかなり冗長になってきた。
solution
ファイルを分割することでこの問題を回避しようとした。logが7月以降、今までは月単位のページ構成だったのを日単位に変更したのはそのためなのだ。既存のファイルでテキストの長いページは相変わらずこの現象が発生するが、あまりひどい場合はCSSを切って読んでほしい。
case 4 - ネストしたpositionのfloatプロパティを正常に読み込んでくれない
symptom
単純なCSSレイアウトでfloatさせると表示は勿論してくれるが、何個もdivタグでネストした状態でfloatを使うとfloatさせた方は表示できるが、となりのブロック要素がきちんと表示できず、レイヤの影に隠れてしまう。muffy's photo galleryなどで画像にキャプションをつける際に利用しようとしたところ、IEで表示させたら画像が表示できていないことからわかった。毎度のことながらopera, mozillaでは問題なく表示できた。
solution
HTMLを書き直し、使用を断念。表示できないものを使うわけにはいかないから。しかし、このような中途半端な実装が実に頭に来る。表組みのレンダリングが早くてもCSSをレンダリングできないブラウザでは意味ないじゃん。Microsoft しっかりしてっていう感じ。
problems on opera
case 1 - フォント揺れ
symptom
これはUnicode対応を果たした6.0 betaからずっと続いている問題。せっかくunicodeに対応したと思ったら、フォントが汚くて話にならないというもの。話にならないというのは言い過ぎかもしれないが、この日本語フォントと欧文フォントのベースの違いは何とかならないものだろうか？» see picture 5
MSゴシック、MS明朝などのかっこ悪い英字フォントを使うのが嫌だからCSSで英字フォントはVerdanaに指定している。そんなことしなければいいじゃんというかもしれないけれど、これだけは譲ることはできない。ダサすぎるのだもの。
ちなみにフォントの表示はやはりIEがいちばん優れていると思う。» see picture 6
Mozillaでもこのようなフォントの揺れは発生しない。» see picture 7
Operaには本当にこの点はがんばってほしい。
solution
Operaのbug fix待ち。Opera 7のリリースまで直さないつもりか。