>  기사  >  웹 프론트엔드  >  IE678과의 호환성이 html5 Tags_html5 튜토리얼 기술을 지원하지 않는 문제를 해결하는 몇 가지 방법

IE678과의 호환성이 html5 Tags_html5 튜토리얼 기술을 지원하지 않는 문제를 해결하는 몇 가지 방법

WBOY
WBOY원래의
2016-05-16 15:50:242112검색

HTML5가 대중화되는 시대가 도래했습니다. 여전히 브라우저 호환성을 기다리고 있다면 이미 웹과의 연결이 끊어졌다는 의미입니다. 물론 이는 모바일 클라이언트의 급속한 발전 때문입니다. 아직도 HTML5와 CSS3 기술을 마스터해야 할지 고민 중이시라면, 한 번 뺨을 때리고 열심히 공부하시기 바랍니다! 프론트 엔드의 스프링이 도착했고 스프링이 두 개 이상 있기 때문입니다. 당신이 믿지 않는다면 나는 단지 이렇게 말할 수밖에 없습니다: 믿거나 말거나!
표준 html5 태그 구조를 살펴보겠습니다. (여기서는 태그에 대해서만 이야기하고 있으며 다른 내용은 없습니다.)

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




html5












html5 태그의 진행 과정 물론 그 의미는 더 직관적입니다. 물론 이것은 html5의 발전 중 한 방울에 불과합니다. 일부 사람들은 다음과 같이 제안합니다. html5의 발전이 혁명적이라고 말하지 말고 발전적이라고 말하세요! 나는 이 말에 동의하지 않지만, 어떤 면에서는 참으로 혁명적입니다. 여기서 주제를 벗어나고 싶지는 않습니다. 레이블에 대해서만 이야기하겠습니다.

물론 이렇게 멋진 의미 태그에 흥미가 있을 때에도 다음과 같이 질문해야 합니다. IE가 이를 지원합니까? 불행히도 대답은 '아니요'입니다. 이미 IE가 두렵다면 끝없는 고문을 계속 견뎌야 할 것입니다. (IE9 및 IE10은 이미 HTML5 및 CSS3.0과 호환됩니다.)

하지만 운이 좋아야 합니다. 당신이 살고 있는 이 시대에는 천재들이 많이 있습니다. 누군가가 이미 이 문제를 해결해 주었습니다! 하지만 완벽하다고 할 수는 없습니다!
html5 태그를 지원하지 않는 IE678과의 호환성 문제를 해결하는 몇 가지 방법을 살펴보겠습니다.

1. javascript: document.createElenment("...")

IE678이 이를 지원하지 않는 이유 중 하나는 바닥글을 유효한 HTML 태그로 간주하지 않기 때문입니다. 그렇다면 라벨로 '만들면' 충분하지 않을까요? 가장 직접적인 방법은 물론 javascript를 사용하여 만드는 것입니다: document.createElenment("...")



코드 복사
코드는 다음과 같습니다. (function(){
var element=['header','footer','article','aside','section ',' nav','menu','hgroup','details','dialog','Figure','figcaption'],
len=element.length
while(len--);
document.createElement(element[i])
}
})();


이는 IE678에서 태그가 될 수 있도록 몇 가지 일반적인 html5 태그를 생성합니다.
누군가 이미 완전한 js 파일을 작성했으므로 다음과 같이 가져오기만 하면 됩니다.
글도 있습니다

window.onload = function() {
alert(document.getElementById("test").innerHTML "---id")
alert(document.getElementsByTagName("section")[0].innerHTML "---TagName")
alert(document.getElementsByTagName("SECTION")[0].innerHTML "---대문자")
}


콘텐츠



테스트 결과 IE678은 모두 테스트를 통과했지만, Fixfox와 Chrome에서는 ID만 알 수 있기 때문에 이 방법 역시 바람직한 방법은 아닙니다!
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:HTML5 가이드-7. 작은 application_html5 튜토리얼 기술을 개발하기 위해 Google 지도와 결합된 위치정보다음 기사:HTML5 가이드-7. 작은 application_html5 튜토리얼 기술을 개발하기 위해 Google 지도와 결합된 위치정보

관련 기사

더보기