HTML5 Shiv--HTML5 태그와 IE(IE6/IE7/IE8)의 비호환성을 해결하는 방법

HTML5의 시맨틱 태그와 속성을 통해 개발자는 명확한 웹 페이지 레이아웃을 쉽게 구현할 수 있습니다. 대부분의 브라우저는 기본적으로 html5와 호환되지만, 현재 ie6/ie7/ie8은 html5 태그와 호환되지 않으므로 이를 호환 가능하게 만들기 위해 자바스크립트 처리가 필요합니다

방법 1: 자바스크립트 코드

<!--[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(&#39;, &#39;);
    var i= e.length;
    while (i--){
        　　document.createElement(e[i])
    }
 })()
</script>
<![endif]-->

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

방법 2: Google의 html5shiv 패키지 사용

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

(ps: 링크된 웹페이지를 열려면 FQ가 필요합니다. 또한 FQ를 하더라도 웹페이지를 열면 No Dialers left가 표시됩니다. 패스0)

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

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

이 링크는 개인 테스트용으로 사용 가능합니다

js 부분이 작성되었지만 여전히 작은 문제가 있습니다. ie6/7/8에서 스크립트를 비활성화하는 사용자를 만나면 스타일이 없는 "화이트보드" 웹 페이지가 됩니다. 어떻게 해결해야 할까요?

noscript 플래그가 있는 "/?_fb_noscript=1" 페이지의 경우 html5 태그를 html4 태그로 바꾸면 호환성을 유지하기 위해 많은 해킹을 작성하는 것보다 가볍습니다.

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

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

js 부분은 해결되었고 이제 CSS 부분이 옵니다. CSS는 레이아웃 설정을 용이하게 하기 위해 이러한 새 요소를 초기화해야 합니다.

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

참고: 좋은 메모리는 나쁜 글쓰기만큼 좋지 않습니다. 개발 중에 직면하는 몇 가지 실제 문제를 요약했습니다. 내용은 상대적으로 기본적이며 유사성은 순전히 우연입니다.

더 많은 HTML5 Shiv-IE(IE6/IE7/IE8) 및 관련 기사에서 HTML5 태그의 비호환성을 해결하는 방법을 보려면 비용을 지불하세요. PHP 중국어 웹사이트에 주목하세요!