구형 IE에서 HTML5 요소 사용하기

IE9를 제외한 IE에서는 HTML5를 지원하지 않기 떄문에 <header>나 <nav>같은 요소를 이용하여 페이지를 만들었을 경우, 막 싸질러 놓은 x같은 끔찍한 결과물을 맛보게 된다.

스크립트로 요소를 생성하고 블럭요소로 스타일을 지정하는 방법으로 해결한다.

 

.js

(function(){
        if(!/*@cc_on!@*/0) return;
        var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,
                eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,
                progress,section,time,video".split(','),i=0,length=e.length;
        while(i<length){
                document.createElement(e[i++])
        }
})();

 

.css

article, aside, dialog, footer, header, section, footer, nav, figure {
        display: block;
}

출처: Moving markup towards HTML5

끝.