IE9 이하 버전(ie6/7/8)에서 html5 elements_html5 튜토리얼 기술을 인식하도록 하는 방법

각 브라우저에는 지원하는 HTML 요소 목록이 있습니다. 목록에 없는 요소는 알 수 없는 요소로 간주됩니다. 브라우저는 알 수 없는 요소에 대해 스타일을 설정하지 않습니다(브라우저마다 요소에 대한 기본 스타일이 다릅니다). IE9 이전 버전에서는 알 수 없는 요소에 스타일을 지정할 수 없습니다. 알 수 없는 요소의 DOM도 잘못 표시되며 IE는 하위 요소가 없는 빈 노드를 DOM에 삽입합니다. 이 알려지지 않은 요소의 자식이라고 생각했던 모든 요소는 형제가 됩니다.

이 문제에 대한 해결책이 있습니다. 기사 태그를 사용하기 전에 js를 사용하여 가짜 기사 요소를 생성하세요. IE는 이 요소를 인식하고 CSS로 스타일 설정을 지원합니다. 이 가짜 요소는 DOM에 삽입할 필요조차 없습니다.

다음 예를 참조하세요:

코드 복사

코드는 다음과 같습니다. :

feimos 블로그에 오신 것을 환영합니다

> ;

이 웹사이트를 처음 방문하셨습니다.

html>

IE6에서는 기사를 인식하지 못하므로 빨간색 테두리가 없습니다.

그런데 머리에 js 문장을 추가하면 상황이 즉시 달라집니다.

코드 복사

코드는 다음과 같습니다.

IE6은 이 요소를 인식하고 효과를 올바르게 표시하는 것처럼 가장합니다.

모든 새로운 HTML5 요소의 가짜 복사본을 한 번만 만들 수 있으므로 앞으로 HTML5를 잘 지원하지 않는 브라우저에 대해 걱정할 필요가 없습니다. Remy Sharp의 HTML5 활성화 스크립트는 이러한 작업을 수행하는 데 도움이 됩니다. 스크립트의 기본 아이디어는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

먼저 조건부 주석을 사용하여 IE9 이전 버전인지 확인하고, 그렇다면 js를 실행합니다. 먼저 모든 새 태그를 e 배열에 쓴 다음 전체 배열을 반복하고 복사본을 만듭니다.

이 스크립트는 Google 프로젝트 호스팅에서 호스팅되었습니다.

코드 복사

코드는 다음과 같습니다.

또한 이 스크립트는 페이지 시작 부분에 배치해야 합니다. 머리에, 바닥에 두지 마세요. 이렇게 하면 IE는 페이지 태그를 구문 분석하기 전에 이 코드를 실행합니다.