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

낮은 버전의 브라우저는 HTML5

HTML5 요소를 블록 요소로 정의

새 항목 추가 HTML 요소

집

웹 프론트엔드

H5 튜토리얼

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

黄舟

Mar 16, 2017 pm 04:19 PM

현재 대부분의 브라우저는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7564

Cakephp 튜토리얼

1386

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

101

Related knowledge

H5는 무엇을 언급합니까? 맥락 탐색 Apr 12, 2025 am 12:03 AM

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

Safari의 로컬 웹 페이지에서 맞춤형 스타일 시트가 적용되지만 Baidu 페이지에서는 그렇지 않은 이유는 무엇입니까? Apr 05, 2025 pm 05:15 PM

Safari에서 사용자 정의 스타일 시트 사용에 대한 토론 오늘 우리는 Safari 브라우저에 대한 사용자 정의 스타일 시트 적용에 대한 질문에 대해 논의 할 것입니다. 프론트 엔드 초보자 ...

CSS를 통해 크기 조정 기호를 사용자 정의하고 배경색으로 균일하게 만드는 방법은 무엇입니까? Apr 05, 2025 pm 02:30 PM

CSS에서 크기 조정 기호를 사용자 정의하는 방법은 배경색으로 통합됩니다. 매일 개발에서, 우리는 종종 조정과 같은 사용자 인터페이스 세부 정보를 사용자 정의 해야하는 상황을 발생시킵니다.

웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까? Apr 05, 2025 pm 10:33 PM

최근 웹 페이지에 로컬로 설치된 글꼴 파일을 사용하여 인터넷에서 무료 글꼴을 다운로드하여 시스템에 성공적으로 설치했습니다. 지금...

JavaScript 또는 CSS를 통해 브라우저 인쇄 설정에서 페이지 상단 및 끝을 제어하는 방법은 무엇입니까? Apr 05, 2025 pm 10:39 PM

브라우저의 인쇄 설정에서 페이지의 상단과 끝을 제어하기 위해 JavaScript 또는 CSS를 사용하는 방법. 브라우저의 인쇄 설정에는 디스플레이가 ...인지 제어 할 수있는 옵션이 있습니다.

웹 페이지에서 로컬로 설치된 글꼴 파일을 사용하는 방법은 무엇입니까? Apr 05, 2025 pm 10:57 PM

웹 페이지에서 로컬로 설치된 글꼴 파일을 사용하는 방법 웹 페이지 개발 에서이 상황이 발생 했습니까? 컴퓨터에 글꼴을 설치했습니다 ...

H5는 html5와 동일합니까? Apr 08, 2025 am 12:16 AM

"H5"와 "HTML5"는 대부분의 경우 동일하지만 특정 시나리오에서는 다른 의미를 가질 수 있습니다. "HTML5"는 새로운 태그와 API를 포함하는 W3C 정의 표준입니다. "H5"는 일반적으로 HTML5의 약어이지만 모바일 개발에서는 HTML5를 기반으로 한 프레임 워크를 참조 할 수 있습니다. 이러한 차이를 이해하면 프로젝트 에서이 용어를 정확하게 사용하는 데 도움이됩니다.