HTML5 브라우저 호환 솔루션에 대한 자세한 설명-H5 튜토리얼-php.cn

HTML5 브라우저 호환 솔루션에 대한 자세한 설명

黄舟

풀어 주다： 2017-03-16 16:19:37

원래의

2041명이 탐색했습니다.

현재 대부분의 브라우저는 HTML5를 지원합니다. 그러나 일부 하위 버전 브라우저에서는 HTML5 지원에 몇 가지 문제가 있습니다.

낮은 버전의 브라우저는 HTML5

모든 브라우저를 지원하며, 인식되지 않는 요소는 자동으로 인라인 요소로 처리됩니다. 따라서 다음 방법을 사용하여 브라우저가 "알 수 없는" HTML 요소를 처리하도록 가르칠 수 있습니다.

HTML5 요소를 블록 요소로 정의

HTML5는 8개의 새로운 HTML 의미 요소를 정의합니다. 이 모든 요소는 블록 수준 요소입니다.
이전 버전의 브라우저에서 이러한 요소를 올바르게 표시하려면 CSS display 속성을 값 블록에 설정하세요.

header, section, footer, aside, nav, main, article, figure {    display: block; 
}

로그인 후 복사

새 항목 추가 HTML 요소

다음 예에서는 HTML에 새 요소를 추가하고 요소의 스타일을 정의합니다. 요소 이름은 <myElement>

<!DOCTYPE html><html><head><meta charset="utf-8">
  <title>为 HTML 添加新元素</title>
  <script>document.createElement("myElement")</script>
  <style>
  myElement{    
  display: block;    
  background-color: #ddd;    
  padding: 50px;    
  font-size: 30px;  
  } 
  </style> 
  </head>
  <body>
  <h1>我的第一个标题</h1>
  <p>我的第一个段落。</p>
  <myElement>我的第一个新元素</myElement>
  </body>
  </html>

로그인 후 복사

document.createElement("myElement")입니다. IE의 경우 브라우저에 새 요소가 추가됩니다.

Internet Explorer 브라우저 문제

위 방법을 사용하여 브라우저에 새 요소를 추가할 수 있지만 IE8 이하는 이 방법을 지원하지 않습니다.

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

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

로그인 후 복사

또는

<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

로그인 후 복사

위 코드의 기능 is , IE 브라우저 버전이 IE9보다 작은 경우 html5.js 파일을 읽고 구문 분석합니다. 전자는 국내 구글 리소스이고, 후자는 국내 바이두 리소스이다.

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

다음은 html5shiv 솔루션을 사용한 예입니다.

<!DOCTYPE html>
<html>
<head>
<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>我的第一个HTML5页面</h1>
  <article>Hello，world！</article>
  </body>
  </html>

로그인 후 복사

위 내용은 HTML5 브라우저 호환 솔루션에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!