IE6/7/8과 호환되는 HTML5 태그를 지원하지 않는 문제를 해결하기위한 몇 가지 솔루션

저자：Eve Cole 업데이트 시간：2025-04-03 20:00:04

HTML5/"> HTML5의 시대는 인기가 있습니다. 브라우저 호환성을 기다리고 있다면 웹과 접촉이 없다는 것을 의미합니다. 물론, 이것은 모바일 클라이언트의 급성장으로 인한 것입니다. HTML5와 CSS3 기술을 마스터 해야하는지 여부에 따라 봄을 마스터해야합니다. 믿지 마십시오. 만 말할 수 있습니다. 믿거 나 말거나!

표준 HTML5 태그 구조를 살펴 보겠습니다. (여기서는 단지 태그에 대해 이야기하고 있습니다.

<! doctype html>

<html>

<헤드>

</head>

<body>

</헤더>

<기사>

<섹션>

</섹션>

</article>

</body>

</html>

HTML5 태그의 발전은 물론 의미론이 더 직관적이기 때문입니다. 물론 이것은 HTML5의 진행 상황 중 하나 일뿐입니다. 어떤 사람들은 다음과 같이 제안합니다. HTML5의 진보는 혁명적이지만 발달이라고 말하지 마십시오! 나는이 진술에 반대하지 않지만 실제로 어떤면에서는 혁명적입니다. 나는 여기서 주제를 벗어나고 싶지 않고 레이블에 대해서만 이야기합니다.

물론, 그런 훌륭한 의미 론적 태그에 대해 흥분 할 때, 나는 다음과 같이 묻습니다. IE를 지원합니까? 불행히도 대답은 아니오입니다. 당신이 이미 IE에 의해 두려워한다면, 당신은 계속해서 끝없는 고문을 견뎌야합니다. (IE9 및 IE10은 이미 호환되며 HTML5 및 CSS3/"> CSS3.0을 지원합니다)

그러나 당신은이 시대에 당신이 살고있는 천재가 많다는 것을 기쁘게 생각합니다. 누군가 누군가 당신 이이 문제를 해결하는 데 도움이되었습니다! 그러나 완벽하게 부를 수는 없습니다!

IE6/7/8과 호환되는 HTML5 태그를 지원하지 않는 문제를 해결하기 위해 몇 가지 솔루션을 살펴 보겠습니다.

1. JavaScript : Document.CreateElement (......)

IE6/7/8이 지원되지 않는 이유 중 일부는 바닥 글을 유효한 HTML 태그로 간주하지 않기 때문입니다. 그렇다면 우리는 단지 라벨로 만들지 않습니까? 가장 직접적인 방법은 물론 JavaScript : Document.CreateElement (......)를 만드는 것입니다!

(기능(){

var element = [ '헤더', '바닥 글', '기사', '제외', '섹션', 'nav', '메뉴', 'hgroup', '세부 사항', '대화 상자', '그림', 'figcaption'],

LEN = Element.Length;

while (len-) {

문서화 (요소 [i])

}

}) ();

이것은 단순히 IE6/7/8에서 태그가 될 수 있도록 몇 가지 일반적인 HTML5 태그를 생성하는 것입니다.

누군가가 완전한 JS 파일을 작성했습니다. 다음과 같이 소개하면됩니다.

<!-[LT IE 9 인 경우]>

<! [endif]-> 글도 있습니다

<!-[LTE IE 9 인 경우]>

<! [endif]-> html5shiv와 html5shim의 유일한 차이점은 m과 v이며 다른 차이는 없습니다! 물론 이것은 내가 말한 것이 아닙니다. 원래 텍스트는 다음과 같습니다. 유일한 차이점은 M이 있고 AV가 있다는 것입니다.

여기서 우리는 특별한 메모를하고 싶습니다 : 즉, 즉, 즉, 독특한 주석 판단 :

LTE : 약어는 그 이하 이하 이하이며, 이는 그 이상 또는 동등한 것을 의미합니다.

LT : 약어는보다 작으며 이는 의미가 적습니다.

GTE : 약어는 그 이상 또는 동일하며 이는 더 크거나 동일합니다.

GT : 약어는보다 크며, 이는 의미합니다.

! : JavaScript의 동등한 판단 기호와 동일하게 동일하지 않음을 의미합니다.

IE9는 HTML5 태그를 지원하지만 지원은 그다지 완전하지 않으므로 선택에 따라 LTE를 쓸 수도 있습니다!

물론 새로 생성 된 태그의 디스플레이 속성을 지정하는 것을 잊지 마십시오. 대부분의 경우 태그가 차단되기를 원합니다.

헤더, 바닥 글, 기사, 제쳐두고 섹션, 네비크, 메뉴, hgroup, 세부 사항, 대화, 그림, 그림 {display : block}

2. 둥지 태그 방법

실제로, 그것을 무뚝뚝하게 말하면, 시맨틱 HTML5 태그는 divs 및 기타 사용 가능한 태그를 사용하고 div에 대한 스타일 만 작성하기 때문입니다. 나는이 글쓰기 방법에 동의하지 않습니다. 이것은 그것을하는 것보다 낫습니다. 태그에 시맨틱 ID 또는 클래스를 제공하십시오!

<!-[LT IE 9 인 경우]>

<스타일>

바디> * .section {

색상 : #ff0;

}

</스타일>

<! [endif]->

<스타일>

섹션. 섹션 {색상 : #f00;

}

</스타일>

<섹션> <div> 컨텐츠 테스트 ... </div> </section>

그러나이 구조와 유사한 경우 사용하는 것이 안전하지 않습니다 .

<avi>

<ul>

</ul>

</nav>

3. 조건부 의견

<!-[LT IE 9 인 경우]> <div> <! [endif]->

<!-[IE 9 인 경우]> <섹션> <! [endif]->

<!-[if! ie]> <!-> <섹션> <!-<! [endif]->

......

<!-[LT IE 9 인 경우]> </div> <! [endif]->

<!-[IE 9 인 경우]> </section> <! [endif]->

<!-[if! ie]> <!-> </section> <!-<! [endif]->

IE의 독특한 의견 판단을 다시보십시오.

LTE : 약어는 그 이하 이하 이하이며, 이는 그 이상 또는 동등한 것을 의미합니다.

LT : 약어는보다 작으며 이는 의미가 적습니다.

GTE : 약어는 그 이상 또는 동일하며 이는 더 크거나 동일합니다.

GT : 약어는보다 크며, 이는 의미합니다.

! : JavaScript의 동등한 판단 기호와 동일하게 동일하지 않음을 의미합니다.

나는 모두가 무슨 일이 일어나고 있는지 이해한다고 믿는다! 이것은 더 고통스러운 방법입니다! 많은 양의 HTML 코드는 원래 시맨틱으로 혼란스러워지기를 원하는 코드를 만듭니다. 그리고 그것은 글쓰기 스타일에 도움이되지 않습니다.

4. XMLNS를 사용하여 문서의 수명 공간을 정의합니다.

XMLNS는 소위 네임 스페이스 인 XHTML 네임 스페이스의 약어입니다. DocType 선언과 마찬가지로 XMLNS도 선언입니다. DocType 선언은 여전히 HTML 문서에 존재하는 것과 달리 XMLNS는 HTML 문서에 존재하지 않습니다. 우리가 보는 XMLNS는 일반적으로 XHTML 문서에 나타납니다.

<html xmlns = http : //www.w3.org/1999/xhtml lang = en> 이것은 xhtml의 원래 네임 스페이스이며 html5 후에 단순화되었습니다.

<html lang = en> Elco Klingen 로그의 방법은 처음에 광범위한 관심을 끌었습니다. 이 기술에는 XML 네임 스페이스가 포함되어 있으며 다음과 같은 네임 스페이스 접두사와 함께 요소를 사용합니다.

<! doctype html>

<body>

<!-내용->

</html5 : 섹션>

</body>

</html>

: HTML5의 접두사는 표준 쓰기 방법이 아니며 다른 문자를 대신 사용할 수도 있습니다. HL5도 괜찮습니다. 접두사를 사용하면 새로운 요소를 인식하여 스타일을 적용 할 수 있습니다. 다른 브라우저에서도 잘 작동하므로 결국 각 브라우저에서 동일한 요소와 동일한 스타일을 성공적으로 구축합니다.

이 방법은 명확한 결함이 있습니다. HTML 문서에서 XML 형식 네임 스페이스를 사용해야하며 CSS에서도이를 수행해야합니다.

html5/: 섹션 {

디스플레이 : 블록;

}

그렇다면 JS와의 호환성은 어떻습니까? 다음은 테스트 DEML입니다

<! doctype html>

<헤드>

<스타일>

html5/: section {display : 블록; 너비 : 100px; 높이 : 50px; 배경 :#F00; 테두리 : 1px 솔리드 블루; 색상 : #ff0; }

</스타일>

<cript>

Window.onload = function () {

alert (document.getElementById ( "test"). InnerHtml + "--- id")

ALERT (document.getElementsByTagName ( "section") [0] .innerHtml + "--- tagname")

Alert (document.getElementsByTagName ( "section") [0] .innerHtml + "--- 대문자")

}

</스크립트>

</head>

<body>

</body>

</html>

테스트 결과는 IE6/7/8에 의해 테스트되었지만 Fixfox 및 Chrome에서 ID 만 얻을 수 있으므로이 방법은 허용 가능한 방법이 아닙니다!