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

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

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

코드 복사

코드는 다음과 같습니다.

상단 영역 🎜>

탐색 영역

하단 영역

;/html>

은 다음과 같이 표시됩니다:

|---------- ------------ --------파이어폭스------------------ ----------|

|탐색 영역|

| 🎜>
|------------------------- ------- ----------------- --|

이전 브라우저의 표시 스타일은 다음과 같습니다.

------------ -----IE6 브라우저-- ------------------------------ --


---------IE8 브라우저------ ----- ----------------


모두 똑같습니다. 제가 틀리지 않았다면 기존 브라우저는 새로 추가된 태그를 인식하지 못하기 때문에 인라인 요소를 사용하여 처리합니다. 따라서 한 가지 해결책은 태그가 태그에 포함되지 않도록 블록 요소로 변환하는 것입니다. 동일한 줄을 사용하여 이전 브라우저와 새 브라우저 모두에서 동일한 효과를 표시할 수 있습니다. 또한 새 태그를 추가하는 구체적인 솔루션은 다음과 같습니다.

IE8/IE7/ IE6은 createElement 메소드로 생성된 태그의 경우 이 기능을 사용하여 이러한 브라우저가 HTML5 새 태그를 지원하도록 할 수 있습니다.

document.createElement('new tag'); //새 태그 추가
JS 코드는 다음과 같습니다.




코드 복사


코드


또는 루프에서 직접 태그를 생성하세요.

코드 복사

코드는 다음과 같습니다.


var e = "abbr, Article, Aside, audio, canvas, datalist, 세부 정보, 대화 상자, 이벤트 소스, 그림, 바닥글, 헤더, hgroup, 표시, 메뉴, 미터, 탐색, 출력, 진행률, 섹션, 시간, 비디오".split(', ');

var i= e.length;

while (i--){ document.createElement(e[ i]) }

CSS 스타일 설정 기본 스타일:

코드 복사

코드는 다음과 같습니다.


더 나아가, 조건부 주석과 JS 코드를 사용하여

코드 복사


를 달성하는 프레임워크 방법을 사용하는 것입니다. 코드는 다음과 같습니다.

이 코드 줄을 직접 추가하면 호환성 문제를 해결할 수 있습니다.