简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > H5 튜토리얼 > 본문

IE가 HTML5 태그와 호환되지 않는 문제를 해결하기 위해 HTML5 Shiv를 사용하는 방법

不言
풀어 주다： 2018-06-14 10:02:03
원래의
2121명이 탐색했습니다.

이 글에서는 IE(IE6/IE7/IE8)가 HTML5 태그와 호환되지 않는 문제를 완벽하게 해결하기 위한 HTML5 Shiv의 방법을 주로 소개합니다. 필요한 친구들이 참고할 수 있습니다.

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


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

두 번째 방법: 구글의 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*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
로그인 후 복사

그러나 ie6의 경우 /7/8 스크립트를 비활성화한 사용자는 스타일이 없는 "화이트보드" 웹 페이지가 됩니다. 어떻게 해결해야 할까요?

noscript를 사용하여 사용자를 "/?_fb_noscript=1" 페이지로 안내하는 Facebook의 접근 방식을 따를 수 있습니다. logo. , html5 태그를 html4 태그로 대체합니다. 이는 호환성을 유지하기 위해 많은 해킹을 작성하는 것보다 가볍습니다. 

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

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

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

html5는 주요 브라우저와 호환되는 플레이어 분석을 구현합니다.

html5의 비디오 태그가 mp4를 재생할 수 없는 문제에 대한 솔루션

위 내용은 IE가 HTML5 태그와 호환되지 않는 문제를 해결하기 위해 HTML5 Shiv를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
html5
원천：php.cn
이전 기사：HTML5 캔버스를 사용하여 눈송이를 내리는 방법 다음 기사：HTML5 로컬 저장소 웹 저장소
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
내 이미지를 페이지의 기본 디스플레이에 표시하려면 어떻게 해야 합니까? 제가 하고 싶은 것은 NASAAPI를 사용하여 사진 몇 장을 받는 것입니다. 이 사진은 내 페이지의 썸네일과 메인 디스플레이에 표시됩니다. 코드가 썸네일에서 이미...
에서 2024-04-06 15:33:12
0
1
433
PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...
에서 2024-04-05 12:57:00
0
1
456
HTML5에서 enctype과 formenctype의 차이점은 무엇입니까? HTMLLivingStandard(새 HTML5 사양이라고도 함)의 enctype 속성과 formenctype 속성의 차이점이 무엇인지 궁금합니다. 나는 개발자를...
에서 2024-04-02 11:47:56
0
1
275
페이지를 모바일 친화적으로 만드시겠습니까? 나는 많은 웹 페이지와 일부 웹 사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모...
에서 2024-04-01 20:42:38
0
1
259
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！