>  기사  >  웹 프론트엔드  >  IE가 HTML5_html5 튜토리얼 기술을 지원하도록 만드는 방법

IE가 HTML5_html5 튜토리얼 기술을 지원하도록 만드는 방법

WBOY
WBOY원래의
2016-05-16 15:51:181337검색

점점 더 많은 사이트에서 HTML5 태그를 사용하기 시작하고 있지만, 현재 상황에서는 여전히 IE6, IE7, IE8을 사용하는 사람들이 많습니다. 모든 브라우저에서 정상적인 액세스를 허용하려면 다음 두 가지 해결 방법이 있습니다.

1. 웹 사이트에 대한 여러 세트의 템플릿을 만들고 프로그램을 사용하여 User-Agent가 다른 브라우저에 대해 다른 콘텐츠를 표시하도록 판단합니다. 사용자 페이지(예: Youku.com)

2. HTML5를 지원하지 않는 브라우저에서도 HTML 태그를 지원하려면 Javascript를 사용하세요.

IE에 대한 더 나은 솔루션은 html5shiv입니다. htnl5shiv는 주로 HTML5에서 제안한 새 요소가 IE6-8에서 인식되지 않는 문제를 해결합니다. 이러한 새 요소는 하위 요소를 래핑하기 위한 상위 노드로 사용할 수 없으며 CSS 스타일을 적용할 수 없습니다. 알 수 없는 요소에 CSS 스타일을 적용하려면 document.createElement(elementName)를 실행하면 됩니다. html5shiv는 이 원칙을 바탕으로 만들어졌습니다.

html5shiv의 사용은 매우 간단합니다. IE9가 html5를 지원한다는 점을 고려하면 페이지 헤드에 다음 코드만 추가하면 됩니다.

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


위 코드를 추가한 후 IE8에서 나타나는 효과는 다음과 같습니다.
在IE 8显示的例子,处理后
사이트포인트 예시에서 노드를 생성하는 자바스크립트 코드가 너무 부풀려진 것 같고, 스매싱매거진에서 제공하는 코드는 엉성한 것 같습니다. 더 간결합니다.
시연은 다음과 같습니다



팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다.

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




HTML5는 기본적으로 작동합니다. 이러한 요소를 배치하려면 다음 예와 같이 CSS를 사용하여 수동으로 블록 요소로 변환해야 합니다.


코드 복사 코드는 다음과 같습니다.
header, footer, nav, section, article {
display:block>}

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.