コーディングメソドロジー

第18回 ブラウザバグとその対応方法

Webブラウザはバージョンアップのたびに機能の改良が施され、正しい文法での記述が、そのまま正しい表示をするようになってきています。反面、古いブラウザでは、文法的に正しくても正しく表示されないという、ブラウザ側の「バグ」が見られます。これらはバグとはいえ、コーディングをする上では正しい表示になるよう対応する必要があります。今回は、そんなブラウザのバグの代表格、IE6の主なバグとその対策をご紹介します。

最も多く悩まされるIE6バグ

Internet Explorer(IE)6は、公開が2001年と古いこともあって、もっともバグに遭遇することが多いブラウザといえます。とはいえ、まだ20%のシェアを占めるIE6を、完全に無視することは難しく、バグへ1つ1つへの個別対策が必要になります。
日付と情報が横並びになっている新着情報一覧のようなエリアを、<dl>タグで組む場合を例にとって、いくつか説明してみましょう。

floatに流れ込む要素がズレてしまうバグ

IE6でよく起こるバグとして、floatした要素にテキストなどのインライン要素が流れ込むと、図1のように1行目だけ3pxのフシギな隙間が空いてしまうことがあります。

CSSサンプルコード

図1・ソース1:floatに流れ込む要素がずれてしまう例

CSSサンプルコード

こういった場合、流れ込む<dd>要素に高さを指定することで解決できればよいのですが、新着情報のような更新の多いエリアの場合、内容がしばしば増減するため、高さの指定ができません。
そこで<dd>要素内にpタグなどを追加し、そちらにheight1%の高さを指定してやると、floatバグを防止できます。

ソース2:ソース1の解決策例

背景や線の表示の崩れのバグ

peek-a-booバグ

図2:スクロールにより線が出たり消えたりする例(peek-a-booバグ)

floatをしている要素にclear要素が隣接すると発生するバグとして、スクロールすると、ある要素が表示されたり消えたりしてしまうことがあります。これは、その挙動から「peek-a-boo」(いないいないばぁ)バグと呼ばれています。

CSSサンプルコード

ソース3:peek-a-booバグの例と対策方法

この場合、<dl>要素に指定されている周囲の1pxの線が問題になっているので、<dl>要素にzoomプロパティ(赤字の記述)を追加することで解決できます。

バグとの戦いはいつ終わる?

IE6はコーダーにとって最も悩ましいブラウザですが、解決方法の1つ1つはそれほど複雑ではありません。表示が崩れても慌てず、一カ所ずつ丁寧に確認していけば、ほとんどの場合解決することが可能です。
とはいえ、youtubeなどの大手サイトもIE6へのサポートを終了することが決まり、IE6のシェアが減っていくのは間違いありません。今後はWebページの運用上、ブラウザシェアを意識して対応ブラウザを決めていくという判断も重要になりそうです。
※Net Applications 2010年1月現在

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム