ＣＳＳ応用編
-2 ブラウザ表示差異の一例
IEは困り者…
IEのバグと言われるものは 数多く報告されています。
スタイルシートへの対応に問題があるとされているIEが、現在最も大きなブラウザシェアを誇っていますので、作成時には注意が必要であると実感します。
また、この点はユーザーターゲットの範囲の決め方に関わってくる問題です。
全OS、全ブラウザに問題なく対応できるようなサイトの作成は当方の今後の大きな課題です。情報伝達という目的以外に、見た目に懲りたいという欲求がある以上は・・・。
ご報告するのは そんなバグのほんの一例です。振り返れば簡単なミスなのですが、作業中には大層悩まされた点なので 自らの注意喚起として挙げる次第です。
CSSを設定する際には こまめにブラウザチェックをしながら作成をしておりました。
ちなみに 通常使用のブラウザをIE6.0に設定していますので、その表示を目安に作成していたことになります。
下図がその際の 当該ページのブラウザ表示です。
中央のテキストエリアのレイアウトは、赤と緑に色づけしたボックスが左右並列、その下に各カテゴリー別にわけたメニュー用のボックスが3つ横並びに、
そして最下部に３行ほどのテキスト、となってます。
一応 制作意図通りに表示されています。
ボックスを複数配してのレイアウトですので、ボックス解釈の異なるIE5.5でのチェックも行います。それが下図です。
ボックス定義のハック（作成編-4 参照）を記述する前でしたので、ボックス解釈の差異が生じ、内容領域が他ブラウザより狭く表示されてしまうIE5.5ではテキストが意図通り収まっていません。各々のボックスの指定をハックを利用して修正しました。
修正後、IE6.0と同じ表示になったので問題なし、と思われました。
次にOpera8.5で確認しました。それが下図です。
この表示で メニュー用のボックスを3つ横並びにさせる回り込み設定が解除されていないことに気づきます。
そのミスにも関わらず IEがこちらの意図通りに表示してしまったので気付きませんでした。どうして意図通りに表示するんだ…IE…、という感じです（笑）。
モダンブラウザであるIE6.0が 数多くの問題点をはらんでいることを忘れ、ブラウザチェックの基本に置いてしまったせいです。
このように非常に単純なミスも見逃してしまう好例と思っています（苦笑）。
こういうことは、書籍等でいくら声高に言われていても、実際に経験してみないとやはり具体的な現象として理解できないことと感じました。
また 同様にNN7.1で確認しました。それが下図です。
上述した回り込みレイアウト解除の問題は Opera8.5と同様です。この点に関してのみ言えば、Opera8.5とNN7.1は策定されているルール通り表示していると言えます。間違っているのはこちらの設定の仕方だったのですから（苦笑）。
回り込み解除を設定したのちの表示が 下図です。
更に NN7.1では、IE、Operaでは見受けられなかったリンクテキストカラーの未反映が生じています。
NNだけはリンクテキストに施した色指定が反映されていません。この点については現在調査中です。
もし、どなたかこの理由をご存知の方がおられましたら、ご指導を仰ぎたいと思っておりますのでよろしくお願い申し上げます。
IEは親切…？
IEでの表示チェック時に 上述したような「ミスに気付かない」という失敗は随分ありました。
あまりにも単純なミスですが、widthを500pxと指定したつもりが5000pxと打ってしまっていたんですね、Opera8.5、及びFireFox1.5での表示確認では当然のようにとんでもない横伸びレイアウトが表示されていて、ミスに気付くわけです。
ところが、そんな時にもIEではきちんと（？）なぜか意図した通りの場所に意図した通りの表示をしてくれます…。
こうなると、困り者なのか、あるいは、親切なのか…。
このように ブラウザ間の表示差異というのは随所に現れるので、常になるべく多くの環境での表示確認をすることが重要だと思います。
当方では全てWIN版のみですが、5種類のブラウザでのチェックを心がけています。
それぞれのブラウザにそれぞれの実装差異があるので、デザイン性においては汎用性を心がけるか、あるいは ある程度の妥協をするか、考え方如何だと感じた次第です。
