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 태그 디자인 인터페이스로 직접 이동하도록 안내할 수 있습니다.