의견 :이 기사는 주로 새로운 HTML5 요소가 이전 브라우저와 어떻게 호환되는지에 대한 솔루션을 소개합니다. 필요한 친구는 그것을 참조 할 수 있습니다.
한 가지 질문, 교사가 우리에게 던진 것은 다음과 같은 것입니다.이 태그와 IE8과 호환되는 방법은 무엇입니까? (JS에서 DOM의 디자인이 필요합니다)오늘 방금 이야기했지만 여전히 이해해야합니다.
<span> <! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> 오래된 브라우저에서 새로운 HTML5 요소의 호환성 비교 -HTML5 Freedom </title>
</head>
<body>
<Header> 상단 영역 </헤더>
<av> 내비게이션 영역 </nav>
<기사> 기사 영역 </article>
<FUTER> 하단 영역 </풋내기>
</body>
</html> </span>
HTML5 태그를 지원하는 브라우저에서는 다음과 같이 나타납니다.
|------------------------------------------------------------------------------------------------------------------------------
| 최고 영역 |
| 내비게이션 영역 |
| 기사 영역 |
| |
|------------------------------------------------------------------------------------------------------------------------------
이전 브라우저의 디스플레이 스타일은 다음과 같습니다.
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
모두 같은 효과가 있습니다. 당신이 틀리지 않은 경우, 이전 브라우저는 새로 추가 된이 태그를 인식하지 못하므로 인라인 요소를 사용하여 모두 해결됩니다. 따라서 솔루션에는 블록 요소가되어 같은 줄에 있지 않도록 솔루션이 있습니다. 이런 식으로, 새로운 브라우저와 오래된 브라우저에 동일한 효과가 표시 될 수 있습니다. 또한 브라우저는 태그를 인식합니다. 새 태그를 추가해야 할 필요성에 대한 특정 솔루션은 다음과 같습니다.
IE8/IE7/IE6은 Document.CreateElement 메소드를 통해 생성 된 태그를 지원합니다. 이 기능은 이러한 브라우저가 HTML5 새 태그를 지원할 수 있도록하는 데 사용될 수 있습니다. 코드는 다음과 같습니다.
문서 .CreateElement ( '새 태그'); // 새 태그를 만듭니다
JS 코드는 다음과 같습니다.
<cript>
문서 .CreateElement ( '헤더');
문서 .CreateElement ( 'nav');
문서 .CreateElement ( '기사');
문서 .CreateElement ( '바닥기');
</스크립트>
또는 루핑으로 직접 태그를 만듭니다.
var e = "abbr, 기사, 제쳐두고, 오디오, 캔버스, 데이터리스트, 세부 사항, 대화, 이벤트 소스, 그림, 바닥 글, 헤더, 마크, 메뉴, 미터, NAV, 출력, 진행, 섹션, 시간, 비디오".split ( ',');
var i = e.length;
while (i-) {
문서 .CreateElement (e [i])
}
CSS 스타일 설정 기본 스타일 :
<스타일>
기사, 제외, 캔버스, 세부 사항, 그림, 그림, 바닥 글, 헤더, HGROUP, MENU, NAV, 섹션, 요약 {
디스플레이 : 블록;
}
</스타일>
또 다른 방법
<span> <!-[LT IE 9 인 경우]>
<cript> src = "http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<! [endif]-> </span>
조건부주의와 관련하여 호환성 문제를 달성하기 위해이 코드를 추가하십시오.
<!-lt ie9 인 경우>
IE9 이하 의지 여부를 결정하는 것입니다. 그렇다면이 JS 코드를 실행하십시오. 그렇지 않다면 무시하십시오. JS의 링크는 직접 열어서 확인하여 확인할 수 있습니다. 또한 큰 코드입니다.