Precautions for the use of html5 semantic elements (browser compatibility issues)

HTML5 provides new semantic elements to clarify different parts of a web page:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

The above elements are all block elements (except <figcaption>).
In order to make these blocks and elements effective in all versions of browsers, you need to set some attributes in the style sheet file (the following style codes can make older browsers support the ones introduced in this chapter Block-level elements):

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

Problems in Internet Explorer 8 and earlier versions of IE

IE8 and earlier versions of IE CSS effects can not be rendered in these elements, so you can not use <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>,or other HTML5 elements.

Solution : You can use HTML5 Shiv Javascript script to solve the compatibility problem of IE. HTML5 Shiv download address:

https://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js

After downloading, put the following code into the web page:

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

The above code will load the html5shiv.js file when the browser is less than IE9. You must place it in the <head>element, because IE needs to render these new HTML5 elements after the header is loaded

Guess you like

Origin blog.csdn.net/Serena_tz/article/details/114024594