クイックリファレンス

レガシー Internet Explorer バグ対策チートシート(アーカイブ)

IE8 以前の有名なバグに関する歴史的リファレンス:change イベント発火遅延、label フォーカス不具合、hasLayout、opacity 継承バグなどを解説。

· 公開日

レガシーな Internet Explorer(IE8)向けサイトの保守で遭遇する代表的なレンダリングバグと JavaScript の挙動をまとめたリファレンスガイドです。

IE8 の既知の挙動と回避策

1. ラジオボタン・チェックボックスでの change イベント

IE8 では <input type="checkbox"> や <input type="radio"> の change イベントがクリック直後に発火せず、フォーカスが外れたタイミングで発火します。

  • 回避策: 即時反映には change ではなく click イベントを監視してください。

2. 入力要素を囲むクリック可能な <label> 要素

IE8 では入力欄を内包した <label> をクリックしても、内部の入力コントロールへのフォーカス移動や切り替えが動作しません。

  • 回避策: 各入力要素に一意の id="..." を付与し、<label for="..."> で明示的に関連付けてください。

3. position 指定された子孫要素への透明度(Opacity)継承

親要素に filter: alpha(opacity=50); を指定しても、position: relative や position: absolute を持つ子孫要素には引き継がれません。

  • 回避策: position 指定された子要素にも直接 opacity フィルタを記述してください。

4. hasLayout トリガーの挙動(IE6 / IE7)

IE6/7 では要素が内部レイアウト寸法を持たない場合、表示崩れ(コンテンツ消失やボックスモデル崩壊)が多発しました。

  • 修正方法: CSS で zoom: 1; を指定して hasLayout を有効化します。

参考リンク

関連テーマ