公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

IE9以下自定义命名标签方法

自定义命名标签

在早期,HTML网页头部常常这么写,如:

<html xmlns="http://www.w3.org/1999/xhtml">

xmlns是值html文档所用到的命名空间,通常都是w3c的规范,所以都指向这个地址。如今html不少站点为了特殊需求,都添加不少自定义的命名标签。

比如:

<lee id="lee">这里是自定义lee标签</lee>

样式定义:

lee{display:block; width:300px; height:100px; background:red; border:5px solid #000; color:yellow; }

在FireFox,Safari,Opera,Chrome,IE9,IE10下都能正常读取标签


IE9以下自定义命名标签方法_www.uibq.com

唯独IE8及IE8以下都不能识别自定义的标签

IE9以下自定义命名标签方法_www.uibq.com

我们使用JS获取它的节点,然后打印内容:

alert(document.getElementById('lee').innerHTML);

执行结果:

IE9以下自定义命名标签方法_www.uibq.com

解决方法

在IE8及IE8以下使用自定义命名空间的可以在html标签指定命名空间

<html  xmlns="diy">

自定义标签加上diy:前缀,如

<diy:lee id="lee">这里是自定义lee标签</diy:lee>

样式声明也需要加前缀:

diy\:lee { display:block; width:300px; height:100px; background:red; border:5px solid #000; color:yellow; }

结束标签也要加上前缀,IE8刷新看看结果:

IE9以下自定义命名标签方法_www.uibq.com

这样就搞定了,只要加上自定义的前缀,后边随便自定义都可以,也可以命名多个:

<!DOCTYPE html>
<html  xmlns:diy>
    <head>
        <meta charset="utf-8" />
        <title>自定义命名空间</title>
        <style type="text/css">
            diy\:qttc,
                diy\:lee { display:block; width:300px; height:100px; background:red; border:5px solid #000; color:yellow; margin:10px; }
        </style>
    </head>
    <body>
        <diy:qttc>这里是自定义qttc标签</diy:qttc>
        <diy:lee>这里是自定义lee标签</diy:lee>
    </body>
</html> 
关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)