[转]完美解决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;以此减少二级索引…

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

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

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;其中位移枚举的使用询问了哥们儿&…

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…

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

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

一个DataGridView辅助类

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

java 压缩文件夹_java 实现压缩文件(单文件 或 文件夹)

接着上篇了解一下java压缩实现过程&#xff0c;下面的是支持 单文件 或 文件夹 压缩的实现&#xff0c;使用递归。效果&#xff1a;代码&#xff1a;package com.gx.compress;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;imp…

java处理中文字符串_Java实现读取文章中重复出现的中文字符串

在上个星期阿里巴巴一面的时候&#xff0c;最后面试官问我如何把一篇文章中重复出现的词或者句子找出来&#xff0c;当时太紧张&#xff0c;答的不是很好。今天有时间再来亲手实现一遍。其实说白了也就是字符串的处理&#xff0c;所以难度并不是很大。以下是代码和运行效果&…

java长连接转短连接_java原生程序redis连接(连接池/长连接和短连接)选择问题...

原标题&#xff1a;java原生程序redis连接(连接池/长连接和短连接)选择问题最近遇到的连接问题我准备从重构的几个程序(redis和mysql)长连接和短连接&#xff0c;以及连接池和单连接等问题用几篇博客来总结下。这个问题的具体发生在java原生程序和redis的交互中。这个问题对我最…

mysql 操作xm_mysql基本命令使用

启动mysql>net start mysql连接mysql>mysql -u root -h 127.0.0.1 -p password断开mysql连接>qult;查看mysql服务器所有数据库列表>show databases;选择mysql数据库>use database_name;创建数据库>create database database_name;删除数据库>drop databas…

mysql集群重启报错lock_CentOS7.2 下 MySQL 之 PXC 集群部署【Docker+单机多节点】

背景【注意】: 鄙人认为本篇适合做入门测试/学习之用&#xff0c;选择的 "单机多节点配置"&#xff0c;后面再整理 "多机配置"文章.近期正突击学习数据库知识想着对 PXC 集群部署实际操作一番&#xff0c;提高技能点&#xff0c;为后续的升职加薪做充足的准…

Fragment销毁时replace和add两个方法的区别

这个首先从一个bug说起&#xff0c;如图: 我们都知道fragment切换有两种方式&#xff1a; 1. replace方式 transaction.replace(R.id.content, IndexFragment); 2. add&#xff0d;hide&#xff0d;show方式 transaction.add(R.id.content, IndexFragment); transaction.hide(…

子集生成 --二进制法

用二进制表示{0,1,2,3...n-1}的子集s&#xff1b;从右往左第i位表示元素i是否在集合s中。图2表示10100110是如何展示了集合{1,2,5,7}的。 注意&#xff1a;为了方便&#xff0c;最右边的为总是对应元素0&#xff0c;而不是元素1&#xff1b; 异或最重要的性质就是开关型---异或…

20150303+JQuery选择器-02

20150303JQuery选择器-02 三、文档处理 插入 删除 复制 替换 包裹 查找 1、插入操作——内部插入 jQuery <div> jQuery hello jQuery</div> l append(content) &#xff1a;将content内容插入到元素的尾部 l appendTo(content) &#xff1a;将匹配到的元素插入到co…

java实现记事本查找_Java实现记事本

首先说明&#xff0c;这是可能本人大学所写的最后一个Java程序了&#xff0c;接下来写C。一直想写这个程序很久了&#xff0c;作为跟计算器类似的经典小程序&#xff0c;写一下还是挺有意义的。本来觉得这程序不难写&#xff0c;其实各个部分综合起来&#xff0c;还是挺麻烦的&…

机器学习 —— 概率图模型(Homework: CRF Learning)

概率图模型的作业越往后变得越来越有趣了。当然&#xff0c;难度也是指数级别的上涨啊&#xff0c;以至于我用了两个周末才完成秋名山神秘车牌的寻找&#xff0c;啊不&#xff0c;CRF模型的训练。 条件随机场是一种强大的PGM&#xff0c;其可以对各种特征进行建模&#xff0c;同…

java生成四则运算表达式_生成四则运算(java实现)

|博客班级 | https://edu.cnblogs.com/campus/ahgc/AHPU-SE-19/ ||作业要求 | https://edu.cnblogs.com/campus/ahgc/AHPU-SE-19/homework/11376||作业目标 | 写一个能自动生成小学四则运算题目的程序 ||学号 | 3190704130 |代码如下&#xff1a;//main函数所在区域主要实现生成…

Kali Linux—借助 SET+MSF 进行网络钓鱼、生成木马、获主机shell、权限提升、远程监控、钓鱼邮件等完整渗透测试(三)

钓鱼邮件 当攻击者制作了钓鱼网站、木马程序后&#xff0c;便会想法设法将其传给受害者&#xff0c;而常见的传播方式便是钓鱼网站了。安全意识较差的用户在收到钓鱼邮件后点击邮件中的钓鱼链接、下载附件中的木马程序&#xff0c;便可能遭受攻击&#xff01; 工具简介 Swak…