Home > Article > Web Front-end > Detailed introduction to the compatibility processing of HTML5 new tags (picture)

Detailed introduction to the compatibility processing of HTML5 new tags (picture)

黄舟Original: 2017-03-31 13:34:322184browse

HTML5Although the new semantic tags have many benefits, there are still compatibility issues in lower versions of the old IE browser, which often makes people feel headaches. In the end Should I boldly use new tags or use a large number of traditional DIV meaningless tags? Today we will briefly take a look at the compatibility of H5 new tags.

First let’s look at a short piece of simple code:

HTML code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
 
    <style>
        header, footer{width:50px; height: 50px; background-color: #f00;}
    </style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
 
</body>
</html>

Under Google browser:

Detailed introduction to the compatibility processing of HTML5 new tags (picture)

IE6 browser:

Detailed introduction to the compatibility processing of HTML5 new tags (picture)

Obviously, header and footer are rendered as block-level elements in browsers that support H5 new tags, while in browsers of IE8 and below It is presented as text and the style does not work, indicating that it is not supported, so how to solve it?

First of all, the first method is to use DOM operation to add these tags. Since the browser does not support it, then I will create one myself:

HTML code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
    <script>
        document.createElement(&#39;header&#39;);
        document.createElement(&#39;footer&#39;);
    </script>
    <style>
        header, footer{display: block; width:50px; height: 50px; background-color: #f00;}
    </style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
 
</body>
</html>

At this time, let’s take a look at the effect displayed by the IE6 browser:

Detailed introduction to the compatibility processing of HTML5 new tags (picture)

The red background color can be displayed, indicating that through document.createElement () This method is feasible, so why does the width and height of the style not work? Because the added elements are inline elements, inline elements have no width and height. After understanding this, we add a "display: block;" to the header and footer in the case. Attribute and see how the effect changes.

<style>
    header, footer{display: block; 
                   width:50px; height: 50px; 
                   background-color: #f00;}
</style>

The effect displayed by IE6 browser:

Detailed introduction to the compatibility processing of HTML5 new tags (picture)

The effect displayed now is exactly the same as what we need, which means that this method can Solve the compatibility issue of H5 new tags in old IE browsers. However, another question is, if there are so many new labels, would it be too troublesome if each one had to be produced through this method?

So, we now introduce the second method, directly borrowing the js library packaged by senior Daniel---html5shiv.js

HTML code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
    <script src="js/html5shiv.js"></script>
 
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
<script src="js/jquery-1.11.0.min.js"></script>
 
<script>
    $(&#39;#header&#39;).css(&#39;color&#39;,&#39;#f00&#39;);
    $(&#39;#footer&#39;).css({&#39;width&#39;:&#39;100px&#39;,&#39;height&#39;:&#39;100px&#39;,
                      &#39;border&#39;:&#39;1px solid #ddd&#39;,
                      &#39;backgroundColor&#39;:&#39;#f00&#39;});
    $(&#39;#header&#39;).html(&#39;我是一只小小鸟&#39;);
</script>
 
</body>
</html>

Then let’s Now directly open the IE6 browser to see the effect:

Detailed introduction to the compatibility processing of HTML5 new tags (picture)

can completely achieve the effect we want, and the operation is simpler and the amount of code is less. You may also wish to use IE7 Also test it in IE8 browser.

The above is the detailed content of Detailed introduction to the compatibility processing of HTML5 new tags (picture). 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：Implementation code sharing of html5 custom maskNext article：Implementation code sharing of html5 custom mask

See more

Detailed introduction to the compatibility processing of HTML5 new tags (picture)

Related articles