[转]完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。

HTML5的新标签元素有:

<header>    定义页面或区段的头部;
<footer>    定义页面或区段的尾部;
<nav>       定义页面或区段的导航区域;
<section>   页面的逻辑区域或内容组合;
<article>   定义正文或一篇完整的内容;
<aside>     定义补充或相关内容;

912275-20160415110806145-2093505565.gif

使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。以下就介绍几种方式。

方法一:Coding JavaScript

<!--[if lt IE9]> 
<script> (function() {if (! /*@cc_on!@*/0) return;var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');var i= e.length;while (i--){document.createElement(e[i])} 
})() 
</script>
<![endif]-->

如果是IE9以下的IE浏览器将创建HTML5标签, 这样非IE浏览器就会忽视这段代码,也就不会有无谓的http请求了。

方法二:使用Google的html5shiv包(推荐)

<!--[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

但是不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的"白板"网页,我们该怎么解决呢?

我们可以参照facebook的做法,即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面,用 html4 标签替换 html5 标签,这要比为了保持兼容性而写大量 hack 的做法更轻便一些。

<!--[if lte IE 8]> 
<noscript><style>.html5-wrappers{display:none!important;}</style><div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.</div>
</noscript>
<![endif]-->

这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。

Capricornus

转载于:https://www.cnblogs.com/sameen/p/5394641.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/430626.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql change index_MySQL · 引擎特性 · Innodb change buffer介绍

前言在前面几期月报我们介绍了undo log、redo log以及InnoDB如何崩溃恢复来实现数据ACID的相关知识。本期我们介绍另外一种重要的数据变更日志&#xff0c;也就是InnoDB change buffer。 Change buffer的主要目的是将对二级索引的数据操作缓存下来&#xff0c;以此减少二级索引…

获取当前日期时间并格式化 - 常见格式

获取系统当前日期时间的方法&#xff1a; 1 //获取系统当前日期时间2 Date.prototype.format function (format) {3 var o {4 "M": this.getMonth() 1, //month5 "d": this.getDate(), //day6 "h": this.getHour…

dncnn图像去噪_一种基于DnCNNs改进的图像降噪方法与流程

本发明涉及图像处理技术领域&#xff0c;具体涉及一种基于dncnns改进的图像降噪方法。背景技术&#xff1a;随着科技进步&#xff0c;新的图像技术在逐渐推广&#xff0c;在日常生活中人们对于图像的要求也越来越高&#xff0c;针对阴天或夜晚等弱光条件下拍摄的图像具有噪点较…

fan怎么写 jin_拼音为fan的字

7画匥匥fn ㄈㄢˊ◎古同“笲”。3画凡凡fn ㄈㄢˊ1、平常的&#xff0c;不出奇的&#xff1a;平凡。凡庸。凡夫俗子。2、指人世间(宗教或迷信的说法)&#xff1a;凡尘。凡心。3、所有的&#xff1a;凡年满十八岁的公民&#xff0c;都有选举权与被选举权。凡是。4、总共&#xf…

Linux 挂载命令 --mount

1.挂载光盘命令 mount : mount [-t vfstype] [-o options] device dir mount [-t 文件系统] [-o 特殊选项] 设备文件名 挂载点 -t 指定挂载的文件系统类型&#xff0c;ext3,ext4,iso9660(光盘的文件类型)f等类型 -o 指定额外的挂载选项 卸载光盘命令 umount 设备文件名或挂…

ios view添加上边框_iOS开发之如何给View添加指定位置的边框线详解

本文主要给大家介绍了关于iOS如何给View添加指定位置边框线的相关内容&#xff0c;分享出来供大家参考学习&#xff0c;下面话不多说了&#xff0c;来一起看看详细的介绍吧。略微封装了一下&#xff0c;给View添加指定位置的边框线&#xff0c;其中位移枚举的使用询问了哥们儿&…

mfc 设置子窗口只打开一遍_MFC 判断子窗体是不是已经打开,避免重复创建

MFC 判断子窗体是否已经打开&#xff0c;避免重复创建在主窗体中&#xff0c;嵌入一个很多个子窗体&#xff0c;但是&#xff0c;每次只显示一个。我的做法是&#xff0c;首先在主窗体头文件中定义子窗体对象&#xff0c;然后在单击显示按钮的时候&#xff0c;先判断子窗体是否…

【BZOJ-2937】建造酿酒厂 前缀和 + 展环为链 + 乱搞

2937: [Poi2000]建造酿酒厂 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 70 Solved: 24[Submit][Status][Discuss]Description Abstinence岛上的居民很喜欢饮用纯酿的啤酒。迄今为止&#xff0c;他们都是从波兰进口啤酒&#xff0c;自己不生产。但今年岛上的一个城市决定…

python以下导入包的格式错误的是_ICMP python上的错误数据包

如何创建帧icmp我在python上标记格式错误的包导入套接字&#xff0c;结构&#xff0c;uuid&#xff0c;子进程&#xff0c;fcntl&#xff0c;time&#xff0c;random列表项from binascii import hexlify&#xff0c;unexlify from datetime导入datetimetarRed原始输入(Ingrese …

win7/8/10安装过程中将动态磁盘转为basic

在分区界面运行ShiftF10在命令窗口运行Diskpartlist diskpartselect disk n(n为磁盘号)cleanconvert xxxPS:xxx代表要转换的结果。基本类型&#xff1a;Basic&#xff1b;动态类型&#xff1a;dynamic&#xff1b;MBR磁盘&#xff1a;MBR&#xff1b;GPT磁盘&#xff1a;GPT转载…

2016年4月 之 《C程序设计语言》

C程序设计语言 转载于:https://www.cnblogs.com/maoxiaowai/p/5404308.html

python绘画音频_人工智能下的音频还能这样玩!!!!

人工智能音频处理库—librosa(安装与使用)序言一、libsora安装pypicondasource二、librosa常用功能核心音频处理函数音频处理频谱表示幅度转换时频转换特征提取绘图显示三、常用功能代码实现读取音频提取特征提取Log-Mel Spectrogram 特征提取MFCC特征绘图显示绘制声音波形绘制…

保存到数据库乱码mysql_Linux下MySQL保存进去数据为乱码的解决办法

MySQL默认的字符编码是latin1,而我用的是utf-8,存入数据库就变成了?????这样的乱码&#xff0c;解决方法&#xff1a;1、windows下:修改my.ini文件&#xff0c;有两处default-character-setlatin1都改为default-character-setutf8重启既可。2、linux下&#xff1a;vi /etc…

Oracle创建表_01

1、 --创建表 create table zctest( id number(9) not null primary key, classname varchar2(40) not null) 2、 3、 转载于:https://www.cnblogs.com/dbskill/p/5407146.html

mySQL数据库中的备份代码_MySQL中的备份数据库

我目前正在学习SQL。我在windows 10-cmd上运行mysql 8.0.16cli,我以root mysql用户身份登录,并以管理员身份运行cmd。我想做的是备份我新创建的数据库。这是我的显示数据库输出:mysql> show databases;--------------------| Database |--------------------| information_s…

网页版四则运算(未全部完成)

这次作业一直在做&#xff0c;一直在拖着&#xff0c;总感觉心里亏欠点什么&#xff0c;但是人就是这样&#xff0c;一件事情本来做起来就没有太多成功的几率&#xff0c;就想着延长工期&#xff0c;那就一直拖着吧&#xff0c;拖得时间越久你就会越发清晰地意识到自己已经非常…

webapp 微信开发适配问题

文章摘自&#xff1a;http://www.cnblogs.com/oksite/p/4630462.html 前段时间由于公司要做微信app 前端主要有我一个人独立开发 分享一下自己独立开发微信app的一些经验 首先说下 适配兼容的问题&#xff1b; 主要的问题还是安卓手机参差不齐&#xff0c;每个手机都有自带一个…

python安装copy_python中copy和deepcopy 的区别

请简述赋值&#xff0c; 深拷贝和浅拷贝的区别?(python中如何拷贝一个对象?)直接赋值(li1 li): 只传递对象的引用&#xff0c; li1指向对象li的内存地址空间,因此&#xff0c; 原有列表li改变&#xff0c; 被赋值的li1也会做相应的改变.浅拷贝:li和li2的内存地址不同,但是子…

iOS中的小知识点

1.tableView隐藏滚动条 self.tableView.showsVerticalScrollIndicator NO; 2.关于属性 使用assign: 对基础数据类型 &#xff08;NSInteger&#xff0c;CGFloat&#xff09;和C数据类型&#xff08;int, float, double, char, 等等&#xff09; 使用copy&#xff1a; 对NSStri…

一个DataGridView辅助类

DataGridView是在用C#做windows界面程序时常用到的控件,DataGridView的功能非常多,用起来也非常复杂 例如1. 我想在每行前面显示行编号,则需要先设置RowHeadersVisible为true,然后,在添加RowPostPaint事件,而RowPostPaint写起来也大同小异,这就非常没有必要.期望一个DataGridVi…