이전 브라우저와 호환되는 HTML5의 새 요소를 만드는 방법

선생님이 우리에게 물으신 질문은 IE8을 이 태그와 호환되게 만드는 방법입니다. (JS에서 DOM을 디자인해야 합니다.)

오늘 말씀드린 내용도 이해가 필요합니다.

코드 복사

코드는 다음과 같습니다.

HTML5의 새로운 요소는 이전 브라우저와 호환됩니다. - HTML5 freer</head> <br><body>상단 영역</header> 🎜><nav>탐색 영역</nav> <br><article</article> <br><footer>하단 영역</footer> ;/html></span> <br><br><br>은 다음과 같이 표시됩니다: <br><br>|---------- ------------ --------파이어폭스------------------ ----------| <br> </div>|탐색 영역| <br><br>| 🎜><br>|------------------------- ------- ----------------- --| <br><br>이전 브라우저의 표시 스타일은 다음과 같습니다. <br><br>------------ -----IE6 브라우저-- ------------------------------ -- <br><br> <br>---------IE8 브라우저------ ----- ---------------- <br><br> <br>모두 똑같습니다. 제가 틀리지 않았다면 기존 브라우저는 새로 추가된 태그를 인식하지 못하기 때문에 인라인 요소를 사용하여 처리합니다. 따라서 한 가지 해결책은 태그가 태그에 포함되지 않도록 블록 요소로 변환하는 것입니다. 동일한 줄을 사용하여 이전 브라우저와 새 브라우저 모두에서 동일한 효과를 표시할 수 있습니다. 또한 새 태그를 추가하는 구체적인 솔루션은 다음과 같습니다. <br><br>IE8/IE7/ IE6은 createElement 메소드로 생성된 태그의 경우 이 기능을 사용하여 이러한 브라우저가 HTML5 새 태그를 지원하도록 할 수 있습니다. <br><br>document.createElement('new tag'); //새 태그 추가 <br><img src="http://files.jb51.net/file_images/article/201405/20140509110057.jpeg?20144911118" alt="">JS 코드는 다음과 같습니다. <br><br><img src="http://files.jb51.net/file_images/article/201405/20140509110137.jpeg?20144911155" alt=""><br><br><br>코드 복사<br><br><br>코드 <br><br> <br><script> ; <div class="msgheader">document.createElement('header') <div class="right">document.createElement('nav') <span style="max-width:90%" onclick="copycode(getid('phpcode76'));">document.createElement('article) '); <u>document.createElement('footer'); </u></script> 또는 루프에서 직접 태그를 생성하세요. <div class="msgborder" id="phpcode76"> <br><br><br><br><br>코드 복사<br><br> </div>코드는 다음과 같습니다.<br><br> <br>var e = "abbr, Article, Aside, audio, canvas, datalist, 세부 정보, 대화 상자, 이벤트 소스, 그림, 바닥글, 헤더, hgroup, 표시, 메뉴, 미터, 탐색, 출력, 진행률, 섹션, 시간, 비디오".split(', '); <div class="msgheader">var i= e.length; <div class="right">while (i--){ <span style="CURSOR: pointer" onclick="copycode(getid('phpcode77'));">document.createElement(e[ i]) <u>} </u></span> </div>CSS 스타일 설정 기본 스타일: </div> <div class="msgborder" id="phpcode77"> <br> <br><br><br>코드 복사<br><br> </div>코드는 다음과 같습니다.<br><br> <br><style> figcaption, 그림, 바닥글, 머리글, hgroup, 메뉴, 탐색, 섹션, 요약{ <div class="msgheader">display : block <div class="right">} <span style="CURSOR: pointer" onclick="copycode(getid('phpcode78'));"></style> <u></u></span>더 나아가, 조건부 주석과 JS 코드를 사용하여 </div> </div> <div class="msgborder" id="phpcode78"> <br><br><br>코드 복사<br><br><br>를 달성하는 프레임워크 방법을 사용하는 것입니다. 코드는 다음과 같습니다. </div> <br> <br><span style="font-size:14px;color:# FF6666;"></span> <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode79'));"><u>이 코드 줄을 직접 추가하면 호환성 문제를 해결할 수 있습니다.  <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script>  </body> </html>

이전 브라우저와 호환되는 HTML5의 새 요소를 만드는 방법_html5 튜토리얼 팁