zoukankan      html  css  js  c++  java
  • 如何让旧浏览器支持HTML5新标签

    HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML5标签。自己最近在写响应式布局的范例,里面也使用到了header等标签。还是比较希望能够做成兼容“旧版浏览器”的,在此和大家共享一下,如何让旧浏览器支持HTML5新增标签。

    书写的基本的HTML代码:

     1 <!doctype html>
     2 <html>
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>让旧浏览器支持HTML5新增标签-独行冰海</title>
     6 </head>
     7 <body>
     8     <header>顶部内容</header>
     9     <nav>导航内容</nav>
    10     <article>文章内容</article>
    11     <footer>底部内容</footer>
    12 </body>
    13 </html>

    Google等新浏览器中的表现:

    如何让旧浏览器支持HTML5新标签 - 独行冰海 - 独行冰海

     IE6中的表现:

    如何让旧浏览器支持HTML5新标签 - 独行冰海 - 独行冰海

     

    其实,让旧浏览器支持HTML5新增标签,听上去很难,操作起来很简单,只需要你懂DOM操作就足够了。

    首先我们使用js进行标签的创建,为HTML文件创建我们需要的这几个HTML5标签。

    1 <script>
    2     document.createElement('header');
    3     document.createElement('nav');
    4     document.createElement('article');
    5     document.createElement('footer');
    6 </script>

    接下来,我们需要使用css进行这几个HTML5标签的样式控制。这是因为,通过这种方法创建的新标签,默认是行内元素。因此需要添加如下代码:

    1 <style>
    2     article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
    3      display: block;
    4     }
    5 </style>

    对于代码位置,我们需要注意,要将script标签放置到head中,而不是body的后面,这是因为,浏览器从上到下进行代码的执行与解析,在已经渲染之后再执行js就没有任何意义和价值了。

    简而言之,就是自己创建一个标签,标签名字为html5的新标签,再对创建的标签添加样式。

    (article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary)

  • 相关阅读:
    [转]SVN服务器搭建和使用(二)
    [转]SVN服务器搭建和使用(一)
    BZOJ 2049 Sdoi2008 Cave 洞穴勘测
    BZOJ 1589 Usaco2008 Dec Trick or Treat on the Farm 采集糖果
    BZOJ 2796 POI2012 Fibonacci Representation
    BZOJ 2115 Wc2011 Xor
    BZOJ 3105 CQOI2013 新Nim游戏
    BZOJ 2460 Beijing2011 元素
    BZOJ 3687 简单题
    BZOJ 1068 SCOI2008 压缩
  • 原文地址:https://www.cnblogs.com/pm-dongjian/p/5022119.html
Copyright © 2011-2022 走看看