HTML5 Shiv는 IE(IE6/IE7/IE8)가 HTML5 tagged_javascript 기술과 호환되지 않는 문제를 완벽하게 해결합니다.

HTML5의 시맨틱 태그와 속성을 사용하면 개발자가 명확한 웹 페이지 레이아웃을 쉽게 구현할 수 있으며 CSS3 효과 렌더링과 결합되어 풍부하고 유연한 웹 페이지를 매우 간단하게 만들 수 있습니다.

HTML5의 새로운 태그 요소는 다음과 같습니다.

페이지 또는 섹션의 헤더를 정의합니다.

페이지 또는 섹션의 바닥글을 정의합니다.

페이지 또는 섹션의 탐색 영역을 정의합니다.
페이지의 논리적 영역 또는 콘텐츠 조합입니다.

텍스트 또는 전체 콘텐츠를 정의합니다.
보충 또는 관련 콘텐츠를 정의하세요.




이를 사용하면 코드 의미를 더욱 직관적으로 만들고 SEO 최적화를 촉진할 수 있습니다. 그러나 이 새로운 HTML5 태그는 IE6/IE7/IE8에서 인식되지 않으며 JavaScript 처리가 필요합니다. 다음은 몇 가지 방법입니다.

방법 1: JavaScript 코딩

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

IE9 이하의 IE 브라우저라면 HTML5 태그를 생성하므로 IE가 아닌 브라우저에서는 이 코드를 무시하고 불필요한 http 요청이 발생하지 않습니다.

두 번째 방법: Google의 html5shiv 패키지 사용(권장)

<!--[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

국내 구글서버 접속카드로 인해 국내 CDN으로 통화하는 것을 권장합니다

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

그러나 위의 방법 중 어떤 방법을 사용하든 새 태그의 CSS는 초기화되어야 합니다. HTML5는 기본적으로 인라인 요소로 작동하므로 이러한 요소를 레이아웃하려면 CSS를 사용하여 수동으로 블록 요소로 변환해야 합니다. 편리한 레이아웃

코드 복사 코드는 다음과 같습니다.

/*html5*/
기사,별도,대화상자,바닥글,머리글,섹션,바닥글,탐색,그림,메뉴{디스플레이:블록}

그런데 ie6/7/8 사용자가 스크립트를 비활성화하면 스타일이 지정되지 않은 "화이트보드" 웹페이지가 됩니다. 어떻게 해결해야 할까요?

사용자에게 noscript 로고가 있는 "/?_fb_noscript=1" 페이지에 들어가도록 안내하고 html5 태그를 html4 태그로 바꾸는 Facebook의 접근 방식을 따를 수 있습니다. 이는 유지 관리를 위해 많은 해킹을 작성하는 것보다 쉽습니다. 호환성.

<!--[if lte IE 8]> 
<noscript>
   <style>.html5-wrappers{display:none!important;}</style>
   <div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/&#63;noscript=1">继续访问</a>.
   </div>
</noscript>
<![endif]-->

이는 사용자에게 스크립트를 열거나 HTML4 태그 디자인 인터페이스로 직접 이동하도록 안내할 수 있습니다.