Home > Developer > Web Develop

Solve the Header,footer and other HTML5 tags in IE (IE6/IE7/IE8) Invalid method

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML5 's semantic tags and attributes make it easy for developers to implement a clear Web page layout, plus CSS3 rendering, to quickly build a rich and flexible Web page.

The new tag elements of HTML5 are:

    • <footer> define the tail of the page or section;
    • <nav> define the navigation area of the page or section;
    • <section> the logical region or content combination of the page;
    • <article> define the body or a complete content;
    • <aside> definition of supplemental or related content;

Use them to make the code semantically more intuitive and more convenient for SEO optimization. However, this HTML5 new label is not recognized on IE6/IE7/IE8 and requires JavaScript processing. Here are a few ways to go.

Way One: Coding JavaScript

Press CTRL + C to copy the code<textarea></textarea>Press CTRL + C to copy the code

If the IE browser below IE9 will create the HTML5 tag, then the non-IE browser will ignore this code, there will be no unnecessary HTTP requests.

Second approach: Using Google's Html5shiv package (recommended)

1 <!--[if Lt ie9]> 2 <script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script>3 <! [endif]-->

However, regardless of which method you use, the CSS for the new tag is initialized. Because HTML5 is represented inline by default, we need to use CSS to manually convert them to block elements for easy layout

1/*HTML5*/2 Article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

But if IE6/7/8 disables the script user, then becomes the non-style "whiteboard" webpage, how should we solve?

We can refer to Facebook's practice of directing users to the "/?_fb_noscript=1" page with the NoScript logo, replacing the HTML5 tag with a HTML4 tag, which is much better than writing a lot of hack to preserve compatibility. Approach is more portable.

1 <!--[if LTE IE 8]> 2 <noscript>3      <style>.html5-wrappers{display:none!important;} </style>4      <div class= "ie-noscript-warning" > your browser disables the script, please <a href= "" > View here </a> to enable the script! or <a href= "/?noscript=1" > Continue access </a>.5      </div>6 </noscript>7 <![ Endif]-->

In recent years, the HTML5 craze, HTML5 added some semantic tags, but also let the front-end brother you rejoice.

HTML5 New Tags

But like IE6,IE7,IE8 these old and old rendering effects and ugly, so that the front-end brother you hate the root itch of the smelly browser, because some of the reasons for the mess can not give up treatment. Of course they don't recognize these new semantic tags.

Send them a hehe.

No, just spit it out. Let's look at the rendering effect of the different new browsers and the HTML5 semantic tags under the old browser.

[HTML]View PlainCopy
  4. <! DOCTYPE HTML>
  6. <HTML lang="en">
  8. <head>
  10. <Meta charset="UTF-8">
  12. <title>test</title>
  14. <style type="Text/css">
  16. header{
  18. color:red;
  20. }
  22. footer{
  24. Color:green;
  26. }
  28. </style>
  30. </head>
  32. <body>
  34. <header>header</header>
  36. <footer>footer</footer>
  38. </body>
  40. </html>


My favorite chrome under:

Textlie ~ ~ ~

The effect under IE8:

But the front-end brothers have come up with a way to deal with them.

The front-end great gods found that using document.createelement to create them before rendering could make those stubborn browsers recognize them.

When the browser version < IE 9 o'clock, append the script snippet:

[HTML]View PlainCopy
  4. <! DOCTYPE HTML>
  6. <HTML lang="en">
  8. <head>
  10. <Meta charset="UTF-8">
  12. <title>test</title>
  14. <style type="Text/css">
  16. Header {
  18. color:red;
  20. }
  22. Footer {
  24. Color:blue;
  26. }
  28. </style>
  30. <!--[if LT ie 9]>
  32. <script type="Text/javascript">
  34. var i = 0, html5tags = ["Header", "Footer", "Nav", "aside", "article", "section"];
  36. For (i in Html5tags) {
  38. Document.createelement (Html5tags[i]);
  40. }
  42. </Script>
  44. <! [endif]-->
  46. </head>
  48. <body>
  50. <header>header</header>
  52. <footer>footer</footer>
  54. </body>
  56. </html>

Look at the effect under IE8:


As for the old browsers, these new semantic tags are rendered in the case of inline elements, as needed to add style {Display:block;} Can.

Okay, now that old-fashioned browsers are already able to identify these new tags, the rest is on our own.

This can lead the user to open the script or jump directly to the interface of the HTML4 label design.

Solve the Header,footer and other HTML5 tags in IE (IE6/IE7/IE8) Invalid method

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
php header and footer example header and footer designs for microsoft word invalid method declaration html5 form method what s new in html5 and css3 what is new in html5 and css3 how to clear cache and cookies in ie

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More