HTML5 브라우저 지원

HTML5를 지원하지 않는 일부 이전 브라우저에서 HTML5를 지원하도록 할 수 있습니다.

HTML5 브라우저 지원

최신 브라우저는 HTML5를 지원합니다.

또한 이전 브라우저와 새 브라우저를 막론하고 모든 브라우저는 인식할 수 없는 요소를 인라인 요소로 자동 처리합니다.

이 때문에 브라우저가 "알 수 없는" HTML 요소를 처리하도록 "가르치" 수 있습니다.

	甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素。

HTML5 요소를 블록 요소로 정의

HTML5는 8개의 새로운 HTML Semantic 요소를 정의합니다. 이러한 요소는 모두 블록 수준 요소입니다.

이전 브라우저에서 이러한 요소를 올바르게 표시할 수 있도록 하려면 CSS display 속성 값을 block:

으로 설정할 수 있습니다. 예

머리글, 섹션, 바닥글, 옆, 탐색, 기본, 기사, 그림 {
display: block;
}

HTML에 새 요소 추가

HTML에 새 요소를 추가할 수 있습니다.

이 인스턴스는 HTML에 새 요소를 추가하고 요소의 스타일을 정의합니다. <myHero>:

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
	display: block;
	background-color: #ddd;
	padding: 50px;
	font-size: 30px;
} 
</style> 
</head>

<body>

	<h1>我的第一个标题</h1>

	<p>我的第一个段落。</p>

	<myHero>我的第一个新元素</myHero>

</body>
</html>

인스턴스 실행»

온라인 인스턴스

JavaScript 문문서를 보려면 "인스턴스 실행" 버튼을 클릭하세요. createElement(" myHero")는 IE 브라우저에 새로운 요소를 추가하는 것입니다.

Internet Explorer 브라우저 문제

위의 방법을 사용하여 IE 브라우저에 HTML5 요소를 추가할 수 있지만,

	Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

Sjoerd Visscher가 만든 "HTML5 Enabling JavaScript", " shiv"를 사용하여 이 문제를 해결할 수 있습니다.

위 코드는 IE 브라우저 버전이 IE9보다 작을 때 html5.js 파일을 읽어서 파싱할 때 사용하는 주석입니다.

참고: 국내 사용자는 Baidu 정적 리소스 라이브러리를 사용하세요. (Google 리소스 라이브러리는 중국에서는 불안정합니다.):

html5shiv는 IE 브라우저에 더 나은 솔루션입니다. html5shiv는 주로 HTML5에서 제안한 새 요소가 IE6-8에서 인식되지 않는 문제를 해결합니다. 이러한 새 요소는 하위 요소를 래핑하기 위한 상위 노드로 사용할 수 없으며 CSS 스타일을 적용할 수 없습니다.

완벽한 Shiv 솔루션

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>

<body>

	<h1>我的第一篇文章</h1>

	<article>
	php中文网 ——  php中文网！！
	</article>

</body>
</html>

인스턴스 실행»

"실행"을 클릭하세요. 온라인 예제를 보려면

html5shiv.js 참조 코드를 <head> 요소에 배치해야 합니다. 왜냐하면 IE 브라우저는 새 HTML5 요소를 구문 분석할 때 먼저 파일을 로드해야 하기 때문입니다.

HTML5 브라우저 지원