Home > Developer > Web Develop
After learning from the previous section, we have built a well-structured page that could not be displayed if browsing in an older version of IE browser.
After all, these semantic elements do nothing to support them, just let the browser treat them as normal <div> elements. So what we're going to do is add a point style rule to them. You can then get a super-reliable semantic element, even if you use a browser 10 years ago.
Add a style to a semantic elementWhen browsers encounter elements that they do not know, they are treated as inline elements. Most HTML5 semantic elements are block-level elements.
So we add a super rule that applies block-level display formatting rules for 9 HTML5 elements:
article, aside, figure, figcaption, footer, header, Main, nav, section, summary { display: block;}For earlier versions of IE, there were problems with the above techniques, which refused to add styles to unrecognized elements.
Fortunately, there is a workaround to create elements through JavaScript, you can cheat IE, let it recognize foreign elements, such as the following code:
Document.createelement (' header ');In fact, there is already a ready-made script to solve this problem, just need the browser to process the rest of the page before running.
To avoid unnecessarily loading JavaScript scripts, you can put the reference script in the IE conditional comment as follows:
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head> <MetaCharSet= "Utf-8"> <!--saved from url= (0014) about:internet - <title>Apocalypse Now</title> <!-- Patch to make semantic elements work in IE8 and below. - <!-- [If Lt IE 9]> <script src= "Html5shiv.js" ></script> <![ ENDIF] - <Linkrel= "stylesheet"href= "Apocalypsepage_revised.css"></Head>
The above code will only run in IE browser, it is also important to note that in the page call Html5shiv.js file must be added in the page
Html5shiv.js files can be viewed from the https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js download, You can simply download the Html5shiv JS file and let it be uploaded to your own server for a separate call.
Maybe GitHub is slow to open, here's a local download link for html5shiv.js: Html5shiv.rar
Study Hard HTML5 (4)--the support of the browser to semantic elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
