zoukankan      html  css  js  c++  java
  • 在IE6/7/8下识别html5标签

    识别html5标签:

    html5添加了许多语义化的标签,比如<nav></nav>,<aside></aside>,<article></article>什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都不支持,也没多大重视,今天早上在群里面看到这些标签的讨论,心里顿时冒出一个疑惑,我在chrome等现代浏览器下面用这些标签固然可以,那么我在IE6/7/8下用这些标签会有什么效果了呢。于是立马动手测试。

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <nav>nav</nav>
        <aside>aside</aside>
    </body>
    </html>

    效果出来了,不用想也知道这几个浏览器是不认这几个标签的,因此只是出现了一行文本:nav  aside;

    而现代浏览器下这两个是正常的块级标签,因此有换行。

    我冒着试试看的心理,给nav和aside标签加上样式试试。

    nav {color: red;}
    aside {color:blue;}

    自然也不行,那么我加上class呢,并添加样式呢。同样宣告失败。

    网上搜了一番,原因是那些老式浏览器诞生的时候压根儿还没有这些标签呢,自然就不认了。解决办法也是有的,那就是在head里面添加如下脚本,让浏览器识别到这是一个标签,这样css也就能顺利渲染了。

    document.createElement("nav");
    document.createElement("aside");

    不过这样写了之后字体颜色是变了,仍然是内联元素,所有还得把样式定义为display:block,不过这些css代码很多reset.css里已经有了。

    为了支持所有新增html5标签,你可以这么写

    function html5(){
        var i = 0, html5tag = ["aside", "figcaption", "figure", "footer", "header", "hgroup", "nav", "section"];
        for(i in html5tag) {
            document.createElement(html5tag[i]);
        }
    }

    或者调用谷歌代码库:

    <!--[if lt ie 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    也有写作
    <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> < ![endif]-->

    这个html5.js功能应该更强大,不仅仅是让老式浏览器识别html5标签那么简单。

    联想:自定义标签

    既然这些个html5里的标签对于老式浏览器来说都是“陌生人”,那么我们自己创造出来的标签性质上也是陌生人,于是我有加了一行代码。

    <my>my</my>
    <you>you</you>
    my {font-size: 30px;}
    you {font-weight: bold;}

    奇葩的是chrome,FF,safari竟然能识别,并且也加上了样式。

    但是在IE下面同样要用createElement创建之后才能识别。

    html5 DOCTYPE:

    以前一直傻乎乎的以为html5里面那行简洁的<!doctype html>文档头也是只能用在支持html5的浏览器里的,今天查了下资料才发现大错特错,自己对文档头的理解不够啊。这个是向下兼容的。HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式,你可能会奇怪IE6/7居然也可以支持HTML5 Doctype,事实上,IE是只要doctype符合这种格式,都会进入标准模式。

  • 相关阅读:
    5.7填数字游戏求解
    5.6判断回文数字
    5.5百钱买百鸡问题
    5.4三色球问题
    5.3哥德巴赫猜想的近似证明
    5.2求两个数的最大公约数和最小公倍数
    5.1舍罕王的失算
    4.19递归反向输出字符串
    Elasticsearch 安装
    linux 安装nginx步骤
  • 原文地址:https://www.cnblogs.com/zmhaki/p/3156208.html
Copyright © 2011-2022 走看看