IE8에서 HTML5 태그가 인쇄 스타일시트에 적용되지 않는 이유
인터넷 익스플로러 8(IE8)은 HTML5의 새로운 섹셔닝 요소(<section>, <article>, <header>, <footer> 등)를 '알 수 없는 태그'로 취급합니다. 그 결과 화면에서는 어느 정도 표시되더라도 인쇄용 스타일시트에는 해당 스타일이 제대로 반영되지 않는 문제가 발생합니다.
해결 방법 1: html5shiv 사용하기
가장 널리 쓰이는 해결책은 html5shiv입니다. html5shiv는 구형 인터넷 익스플로러에서 HTML5 섹셔닝 요소를 사용할 수 있도록 지원하며, IE6~9 환경에서 기본적인 HTML5 스타일링까지 함께 제공합니다.
사용 방법은 간단합니다. <head> 태그 안에 아래와 같이 조건부 주석 형태로 스크립트를 추가하면 됩니다.
<!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
해결 방법 2: document.createElement로 요소 직접 생성하기
별도의 라이브러리 없이 처리하고 싶다면 document.createElement를 사용해 알 수 없는 요소를 직접 생성하는 방법도 있습니다. IE는 이렇게 자바스크립트로 생성된 요소에는 CSS를 정상적으로 적용할 수 있습니다.
var demo = document.createElement("demo");
demo.innerHTML = "Working!";
document.body.appendChild(demo);