クロスブラウザの基礎知識 ～原因とその対応方法～

Web制作やBlogのカスタマイズでよく起こりがちなのが、「あるブラウザでは思った通りに表示されるが、別のブラウザで見ると表示が崩れている。もしくは思った通りに表示されない。」という現象。

私もBlogのカスタマイズで新しいテンプレートを土台にあらゆる場所を変更したのですが、様々な表示の違いにかなり悩まされました。自分が調べている範囲でもIE以外の利用者が相当増えてきていますから、IEだけでちゃんと表示されればいいと割り切るわけにもいきません。(そもそも自分はFirefoxを使ってますからね。)

今回はそのようなクロスブラウザ対応で困らないための基礎知識がテーマです。起きるトラブルで大体の原因の予想がつけば、解決する手段を見つけるのはそう難しくありません。もちろん個々のトラブルの原因はケースバイケースですから、条件に当てはまらない場合も多々ありますのでご注意を。

1. すべてのブラウザで表示がおかしい

最初からクロスブラウザにあまり関係ありませんが、どのブラウザでチェックしても表示がおかしいケース。これは単純にHTML・CSSの記述ミスや誤字脱字などでよく起こります。やってしまいがちなのは以下のようなものではないでしょうか。

  • タグの閉じ忘れ(誤って閉じタグを消してしまう場合なども)
  • 意図しないところでタグを閉じている
  • タグのタイプミス
  • CSSのプロパティの誤字
  • CSSの値が適切でない(0が一つ多いなど)
  • CSSで複数の宣言をしているのに「;」を書き忘れている

単純なミスがほとんどですから、下記の文法チェッカで比較的簡単に問題を見つけることが出来ます。

ただ複雑なHTMLソースでdivの閉じ忘れなどがあった場合、閉じ忘れがわかっても「どこを閉じ忘れているのか」がわからないことがあります。そういうことにならないためにも、あらかじめ半角空白やタブでタグの関係をわかりやすくしておいたり、閉じタグにどのタグを閉じているのかをコメントで残しておいた方がトラブルに対処しやすくなるでしょう。

2. 他のブラウザでは問題ないがFirefoxだけおかしい

IEやOperaなどではきちんと表示されるのに、Firefox(Mozilla)だけ思った通りに表示されないケース。これはFirefoxが厳格に仕様どおりの表示を行うために起きる現象です。例えばこのBlogでもメタタグのcontent部分に正確ではない文字列を入れてしまったため、外部CSS以外のスタイルが無視される現象が起こりました。

このトラブルが起きるのは、HTMLやCSSの仕様に合致していないページを作ってしまった場合です。記述ミスを含め、Web標準な「仕様どおりの正しい」記述に修正すれば直るはずです。

ただFirefoxならすべてのページを厳密に表示するのか？といえば、そういうわけではありません。

Mozillaはできうる限り仕様に厳格な表示を行うように制作されています。 しかし、仕様に厳格なだけでは現存するWebサイトのうち、かなりのサイトで表示に問題が出ます。 そこで、MozillaはMac版IE5と同様にHTMLの記述方法によって(DOCTYPE宣言によって)表示方法を切り替えるようにしています。

Full Standardモード

HTML4.01 Strict、XHTMLで使用される最も仕様に厳格で、正しい表示を行うモードです。

Almost Standardモード

HTML4.01 Transitional(システム記述子あり)で使用される特殊なStandardモードです。

Quirksモード

DOCTYPE宣言が行われていない場合や、古いバージョンのHTMLが宣言されているとこのモードでレンダリングされます。

Mozillaには複数のレンダリングモードがあります (Web標準普及プロジェクト)

上記の「Quirksモード」が互換モードで、「Standardモード」とは挙動が異なります。詳細は以下のリンク先を参照してください。

Mozilla Quirks Mode Behavior (日本語)

今見ているページがどのモードでレンダリングされているかは、(Windowsなら)右クリック→「ページの情報を表示」で簡単にチェックすることが出来ます。

Standardモード(標準モード)の場合
Firefox Standardモード

Quirksモード(互換モード)の場合
Firefox Quirksモード

上記の引用元に書かれていますが、DOCTYPE宣言によって以下のようにレンダリングモードが変わります。(2008年現在でよく使われるもののみ。)

Standardモード
  • XHTML 1.0 Transitional
  • XHTML 1.0 Strict
  • XHTML 1.1
  • HTML 4.01 Transitional (※「loose.dtd」付きのみ)
  • HTML 4.01 Strict
Quirksモード
  • DOCTYPE宣言なし
  • HTML 4.01 Transitional

(すべてFirefox2.0.0.14で調査。)

DOCTYPE宣言をしつつ互換モードを使いたい場合、loose.dtd無しのHTML 4.01 Transitionalを選ぶということになりそうです。

3. IEでは問題ないが、他のブラウザで表示がおかしい

上記の「他のブラウザでは問題ないがFirefoxだけおかしい」パターンと似ていますが、Firefoxだけではなく他のOperaなどでも意図した表示がされないケース。これはほとんどの場合、「動作チェックをIEでしか行っていない」ページで起こります。実際にWeb上でも一番見かけるタイプでしょう。

IEは特にバージョン7以前で多くのバグを抱えていて、また独自拡張の(HTML・CSS問わず)規格も数多く実装されています。(実際は他のブラウザでも使えるようになっているものもありますが。)IEのみで表示チェックを行ってしまうと、本来のHTMLやCSSの仕様と違う表示を前提に見栄えを整えてしまうので、結果として仕様どおりの表示を行う他のブラウザでは見栄えが異なったり、表示が崩れたりします。

参考 : IE7でも放置されるIE6のCSSバグ

また、IEは多少の記述ミスでも問題なく表示してしまいますが、他のブラウザ(特にFirefox)はそこまで寛容ではありません。IEは「多少の問題があっても」表示されますが、逆にいえば「問題に気がつかない」事態も引き起こすので注意が必要でしょう。

Firefoxを使っているならば、標準で搭載されているエラーコンソールでCSSのエラーをチェックすることが出来ます。(メニューの「ツール」→「エラーコンソール」)また、同じような機能はOperaでもあります。(「ツール」→「詳細ツール」→「エラーコンソール」)IE以外で問題が出るとき試してみてもいいでしょう。

4. 他のブラウザでは問題ないが、IEだけ表示がおかしい

上記とは逆のパターンですが、これもよく起こります。現象は逆ですが起こる原因は同じで、IEと他のブラウザでHTMLやCSSの解釈の仕方が違うのと、IE自体のバグのせいです。

この現象が起こる場合、大概は本来の仕様どおりの「問題がない」HTMLやCSSの記述をしているのですが、IEはバグや仕様で「本来の仕様どおり」にソースを解釈してくれません。最初の方で紹介したHTML・CSSの文法チェッカで調べても問題は出ないのですが、これはIEの方に問題があるからです。

Internet Explorer (Windows) CSSバグリスト

特にBlogのテンプレートなどでありがちなのが、HTMLソースの先頭にXML宣言を書いてIE6が互換モードで動作してしまうことでしょう。(IE6ですら今となっては古いブラウザですが、それよりさらに古いバージョンの互換になってしまう。)これはBlogのテンプレートが高いの確率でXHTML＋CSSで書かれていて、XHTMLではXML宣言をすることが強く推奨されているからです。(条件によっては宣言しなくてもよい。)

一番の問題は、IE6はHTMLのいちばんあたまにDOCTYPE宣言を書かないと必ず後方互換モードとして解釈してしまうことである。よくあるケースは、XHTMLで書く場合。通常、XHTMLではDOCTYPE宣言の前にXML宣言を書くため、IE6では有無を言わせず後方互換モードになってしまう。

IE6のwidth解釈バグ対処法 (ADP)

ただ個人的にはそんなにXML宣言にこだわる必要は無いのではないかと思います。XML宣言をすることは強く推奨されていますが、「ブラウザでの閲覧」という点で考えるとあってもなくても別に変わりません。むしろ前出のとおりIE6での表示に問題が出ることがあり、IE6のシェアとその対応への手間を考えてXML宣言をしないというのも一つの手でしょう。

もちろん、XML宣言をしつつ表示が崩れないのが一番なのですが。(このBlogもXML宣言しつつIE6でも問題ない……ようになっているはず。)

クロスブラウザ対応をスムーズにおこなうためには

まず前提として、ブラウザでの動作チェックをおこなうときにIEを使うのをやめましょう。前出のとおり、IEは独自解釈やバグが多く、IEでの表示を前提してチェックをすると「本来表示されるべき」形になりません。結果として3番の「IEでの表示に特化した」ページになってしまい、他のブラウザに対応させるときに大きな障害になってしまいます。

最初の動作チェックは一番厳格に仕様どおりの動作をするFirefoxのStandardモードを使い、それからIEに対応していくとスムーズに作業が進みます。Operaの対応はどうするのか？と思われるかもしれませんが、Operaも基本的にFirefoxと同じようにWeb標準どおりの動作をするように作られているため、極端に意図した表示から外れるということはあまりありません。(ただしOpera特有の「クセ」のようなものはある。)

どうしてもIEを使わざるを得ない、他のブラウザを使えないという状態ならば、最低でもIE7を使用しましょう。IE7でも修正されていないバグや仕様がありますが、それでもIE6に比べればかなり問題が少なくなっています。(つまり標準どおりの動作をしてくれることが多くなった。)

単純にブラウザという点から見ても、「タブ機能の搭載」「RSSリーダー機能の追加」とかなりの性能強化がされています。未だにIE6を使用している方は、本格的な移行を考えても損はないと思います。(環境によっては不正終了を繰り返したりするらしいですが、少なくとも私の環境では問題ないです。)

Internet Explorerへの対応

FirefoxやOpera、(私は使ってませんが)Safariなどのモダンブラウザで問題なく表示されるようになったら、ここでIEでのチェックに入ります。ここで思った通りに表示されればいいですが、そうでないなら個別の対応が必要になります。

対応にはいくつかの方法があり、作成・修正しているサイトの種類やレベルによって「適切」と思うものを選択すればいいでしょう。(例えばこのBlogのようにあくまで個人の趣味でやっているなら、修正方法は場当たり的なものでいいですし、古いブラウザを切り捨てても別に大した問題にはなりません。あくまで個人の考え方次第で終わりますから。)

「CSSハック」を使う

ブラウザの(主に)バグを利用した「CSSハック」と呼ばれる方法。特定のブラウザのみに認識されるようにコードを記述して、そのブラウザに対応させたCSSを個別に書きます。古いIEに対応させたコードを別途書く場合が多いようですが、IE以外を対象にして書くこともあるようです。

例 : バージョン6以下のIEのみ背景色を白(#ffffff)にする。

* html body { background-color : #ffffff; }

詳しくは下記のサイトを参照してください。

ただし欠点もいくつかあります。

  • コードが長く複雑になりやすい
  • 記述の関係で「正当なCSS」にならない場合がある
  • 今後を考えてなるべく使わない方がいい「悪いハック」も存在する

「悪いハック」については以下を参照してみてください。

「条件付きコメント」(条件分岐コメント)を使う

IEが独自に実装している「条件付きコメント(Conditional Comments)」を使う方法です。HTMLソースの中に直接特殊なコメントを書くと、条件指定したIEのみがそれを認識してコードを実行したり除外したりします。条件から外れる場合とIE以外のブラウザでは、ただのコメントとして扱われます。

例 : IE6のみに反映される記述。

<!--[if IE 6 ]> IE6のみで表示される部分 <![endif]-->

条件付きコメントの中でスタイルを設定したり、個別のCSSを読み込ませることによってIEによる不具合を回避することができます。

欠点としては以下のものがあるようです。

個別の問題にそれぞれ対応する

IE専用の記述を最小限に抑え、HTMLの修正＋CSSの追加記述などを使う方法。IEでトラブルになりやすいところは大概決まっているので、最初から対応しておく or 問題になったら対応します。

IEで有名なトラブルには以下のようなものがあります。

前出の「XHTMLでXML宣言をするか否か」もこの方法の一つといえるでしょう。

まとめ

今回の内容を簡潔にまとめると以下のようになります。

  • 初歩的なミスに気をつける
  • 文法チェッカを積極的に使い、ミスを発見する
  • 動作チェックをするときはまずFirefoxを使う
  • 他のブラウザでのチェック、特にIEは固有の問題が起こりやすいので後回しにする
  • IEへの対処方法は「CSSハック」「条件付きコメント」などがある
  • 起こりやすいIEの問題は事前に調べておくとトラブルが回避しやすい

すべてのブラウザでまったく同じ表示をさせるというのは難しいですが、IE以外でも「特に問題なく読める」というサイトがもっと増えると個人的にも嬉しいですね。(Firefoxで読めないほど崩れる→IEでアクセスし直しという手間が省けますから。)