본문 바로가기

퍼블리싱/HTML5

IE9이하 버전에서 HTML5 태그 대응하기

요즘 web페이지와 모바일 web페이지를 같이 만들면서 html5를 많이 사용하고 있다.

html5는 시멘틱마크업하기에도 적절하기때문에 요즘 갈수록 사용하는 사이트수가 많아지고 있지만,

IE 구버전에는 안먹히는 태그가 많기때문에. 크로스 브라우징에는 취약하다.

예를 들면 header, footer, section, aside 등은 IE 9버전 이하에서는 먹히지 않는다.

그래서 IE9 이하 버전에서는 다음과 같이 element를 만들어줘서 쓰기도하지만,


<!--[if lt IE 9]>
    <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
    </script>
<![endif]-->


그보단 이미 만들어져있는 js를 쓰면 편할 것이다.

가장 많이 쓰이는 js는 html5shiv.js 이고 다음 처럼 url연결해서 쓸수있다.

<!DOCTYPE html>
<html>
 <head>
  <!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
  <![endif]-->
 </head>
 <body>
 </body>
</html>


또는 직접 다운받아서 사용할 수 있는데 관련 라이브러리는 

https://github.com/aFarkas/html5shiv

에서 참고하면 된다.





'퍼블리싱 > HTML5' 카테고리의 다른 글

disabled와 readonly 속성의 차이  (0) 2015.02.23
required 속성  (0) 2015.02.23
html5 새로운 요소들의 적절한 사용  (0) 2015.02.23
html5 규칙과 이전버전 규칙의 혼합  (0) 2015.02.23
HTML5 기본템플릿  (0) 2015.02.23