Detailed explanation of HTML5 browser compatibility solutions-H5 Tutorial-php.cn

Table of Contents

Lower version browsers support HTML5

Defining HTML5 elements as block elements

Home

Web Front-end

H5 Tutorial

Detailed explanation of HTML5 browser compatibility solutions

黄舟

Mar 16, 2017 pm 04:19 PM

Currently, most browsers support HTML5. However, some lower version browsers have some problems with HTML5 support.

Lower version browsers support HTML5

all browsers, and unrecognizable elements will be automatically processed as inline elements. Therefore, you can use the following method to teach the browser to handle "unknown" HTML elements.

Defining HTML5 elements as block elements

HTML5 defines 8 new HTML semantic elements. All these elements are block-level elements.
In order to allow older versions of browsers to display these elements correctly, you can set the display attribute of CSS to block:

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

Copy after login

Add new Element

The following example adds a new element to HTML and defines a style for the element. The element name is

:

<!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>

Copy after login

document.createElement( "myElement") is to add new elements to IE browser.

Internet Explorer browser problem

You can use the above method to add new elements to the browser, but IE8 and below cannot support this method.

We can use the "HTML5 Enabling
JavaScript", "shiv" created by Sjoerd Visscher to solve this problem:

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

Copy after login

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

Copy after login

The above code is , when the IE browser version is smaller than IE9, the html5.js file will be read and parsed. The former one is the national Google resource, and the latter one is the domestic Baidu resource.

For

IE browserhtml5shiv is a better solution. html5shiv mainly solves the problem that the new elements proposed by HTML5 are not recognized by IE6-8. These new elements cannot be used as parent nodes to wrap child elements, and CSS styles cannot be applied.

The following is an example of using the html5shiv solution:

<!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>

Copy after login

The above is the detailed content of Detailed explanation of HTML5 browser compatibility solutions. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Where to find the Crane Control Keycard in Atomfall

1 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7431

CakePHP Tutorial

1359

What is the format of the account name of steam

win11 activation key permanent

Related knowledge

How to achieve gap effect on the card and coupon layout with gradient background? Apr 05, 2025 am 07:48 AM

Realize the gap effect of card coupon layout. When designing card coupon layout, you often encounter the need to add gaps on card coupons, especially when the background is gradient...

How to correctly display the locally installed 'Jingnan Mai Round Body' on the web page? Apr 05, 2025 pm 10:33 PM

Using locally installed font files in web pages Recently, I downloaded a free font from the internet and successfully installed it into my system. Now...

Why does negative margins not take effect in some cases? How to solve this problem? Apr 05, 2025 pm 10:18 PM

Why do negative margins not take effect in some cases? During programming, negative margins in CSS (negative...

How to customize the resize symbol through CSS and make it uniform with the background color? Apr 05, 2025 pm 02:30 PM

The method of customizing resize symbols in CSS is unified with background colors. In daily development, we often encounter situations where we need to customize user interface details, such as adjusting...

How to use CSS and Flexbox to implement responsive layout of images and text at different screen sizes? Apr 05, 2025 pm 06:06 PM

Implementing responsive layouts using CSS When we want to implement layout changes under different screen sizes in web design, CSS...

How to obtain real-time application and viewer data on the 58.com work page? Apr 05, 2025 am 08:06 AM

How to obtain dynamic data of 58.com work page while crawling? When crawling a work page of 58.com using crawler tools, you may encounter this...

iconfont icon displays abnormal intermittently? How to troubleshoot and solve coding problems Apr 05, 2025 am 07:54 AM

iconfont...

The text under Flex layout is omitted but the container is opened? How to solve it? Apr 05, 2025 pm 11:00 PM

The problem of container opening due to excessive omission of text under Flex layout and solutions are used...

See all articles