레거시 Internet Explorer(IE8) 사이트 유지보수 시 자주 마주치는 악명 높은 렌더링 버그와 JavaScript 특성 참고 가이드입니다.
알려진 IE8 특성 및 해결 방법
1. 라디오 및 체크박스 컨트롤의 change 이벤트
IE8에서는 <input type="checkbox">와 <input type="radio">의 change 이벤트가 클릭 즉시 발생하지 않고 포커스를 잃을 때(blur) 발생합니다.
- 해결 방법: 즉각적인 상태 업데이트가 필요할 때는
change대신click이벤트를 수신하세요.
2. 입력 요소를 감싼 클릭 가능한 <label> 요소
IE8에서는 input 필드를 감싼 <label>을 클릭해도 내부 입력 컨트롤이 토글되거나 포커스되지 않습니다.
- 해결 방법: 모든 input에 고유한
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을 강제 활성화하세요.