>  기사  >  웹 프론트엔드  >  IE9 이하 버전(ie6/7/8)에서 html5 elements_html5 튜토리얼 기술을 인식하도록 하는 방법

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

WBOY
WBOY원래의
2016-05-16 15:49:461317검색

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

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

다음 예를 참조하세요:

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





알 수 없는 요소




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

> ;

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




html>

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

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

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

코드 복사
코드는 다음과 같습니다.



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

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

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

코드 복사
코드는 다음과 같습니다.



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

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

코드 복사
코드는 다음과 같습니다.



또한 이 스크립트는 페이지 시작 부분에 배치해야 합니다. 머리에, 바닥에 두지 마세요. 이렇게 하면 IE는 페이지 태그를 구문 분석하기 전에 이 코드를 실행합니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.