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

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

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

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

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

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

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

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

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

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

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