지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > 본문

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

WBOY
풀어 주다： 2016-05-16 15:51:18
원래의
1373명이 탐색했습니다.

점점 더 많은 사이트에서 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>}

관련 라벨：
html5 ie
원천：php.cn
이전 기사：HTML5로 놀면서 익히기 (2) 기본 드로잉 구현 방법_html5 튜토리얼 스킬 다음 기사：HTML5_html5 튜토리얼 팁을 지원하는 IE 솔루션
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
이 페이지를 반응형으로 만들려면 어디서부터 시작해야 합니까? <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8...
에서 2024-04-04 21:21:25
0
1
457
onblur 이벤트를 통해 입력 값을 얻는 방법은 무엇입니까? onblur 이벤트를 통해 값 입력을 얻으려고 하는데 JS 모듈을 사용할 때 작동하지 않습니다. <!DOCTYPEhtml><htmllang=&qu...
에서 2024-04-03 08:55:32
0
1
360
빈 객체를 반환하는 axios에서 노드 서버로 데이터를 보낼 수 없습니다. 내 클라이언트 코드: <htmllang="en"><head><metacharset="UTF-8"/&...
에서 2024-03-31 11:14:22
0
1
2476
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿