search

Home >Web Front-end >H5 Tutorial >Detailed explanation of HTML5 browser compatibility solutions

Detailed explanation of HTML5 browser compatibility solutions

黄舟
黄舟Original
2017-03-16 16:19:372101browse

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:

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

Add new Element

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

42e526b9ba2ad1676af0e54be02a3dd4: 

<!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") 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]-->

or

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

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>


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：
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
Previous article：HTML5 web storage-web SQL sample code analysisNext article：HTML5 web storage-web SQL sample code analysis

Related articles

See more