レガシーな 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を有効化します。