HTML5的语义化标签以及属性  

  1.可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单

  2.使用他们能让代码语义化更直观,而且更方便SEO优化。

 但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。以下就介绍几种方式。

方式一:Coding JavaScript 

<!--[if lt IE9]>   //注释标签,只有小于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]-->

 第二种方法:使用Google的html5shiv包

<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
//初始化 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]-->

html5标签的兼容性处理的更多相关文章

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

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  2. 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...

  3. 关于HTML5标签不兼容(IE6~8)

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

  4. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法zt

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

  5. 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼

    2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼   转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升:IE10 随着 Windows 8 在 ...

  6. 解决IE8不支持html5标签最好解决办法?

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法:HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显 ...

  7. HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面 ...

  8. 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼【转】

    摘要: 这篇文章给大家带来<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>,让我们一起来看看2013年的浏览器现状.浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 ...

  9. 解决HTML5标签兼容的办法搜集

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

随机推荐

  1. javascript深入理解js闭包(转)

    javascript深入理解js闭包 转载  2010-07-03   作者:    我要评论 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...

  2. Learning Python 006 list(列表) 和 tuple(元组)

    Python list(列表) 和 tuple(元组) list 列表 Python内置的一种数据结构.list:一种有序的集合,可以随时添加和删除其中的元素. list的用法 定义list > ...

  3. ArrayList反转

    Collections.reverse(arrayList); 下面看例子: import java.util.ArrayList;import java.util.Collections; publ ...

  4. Dapper.Common基于Dapper的开源LINQ超轻量扩展

    Dapper.Common Dapper.Common是基于Dapper的LINQ实现,支持.net core,遵循Linq语法规则.链式调用.配置简单.上手快,支持Mysql,Sqlserver(目 ...

  5. Linux 最小系统挂载U盘(SD、TF卡)并执行程序

    一.在Ubuntu下编译C文件 使用指令"arm-none-linux-gnueabi-gcc-4.4.1 -o HelloWorld HelloWorld.c -static"编 ...

  6. C#中的自动属性、隐式类型var、对象初始化器与集合初始化器、扩展方法

    1.自动属性(Auto-Implemented Properties) //以前的写法 .net2.0 private string _userName; public string UserName ...

  7. JAVA对象创建的过程

    Java中一个实例对象被创建的过程 一.类的加载过程 首先,Jvm在执行时,遇到一个新的类时,会到内存中的方法区去找class的信息,如果找到就直接拿来用,如果没有找到,就会去将类文件加载到方法区.在 ...

  8. CF868F Yet Another Minimization Problem(决策单调性)

    题目描述:给定一个序列,要把它分成k个子序列.每个子序列的费用是其中相同元素的对数.求所有子序列的费用之和的最小值. 输入格式:第一行输入n(序列长度)和k(需分子序列段数).下一行有n个数,序列的每 ...

  9. Click: 命令行工具神器

    Click是一个Python用来快速实现命令行应用程序的包,主要优势表现在以下三点: 任意嵌套命令 自动生成帮助页 自动运行时lazy加载子命令 示例程序: import click @click.c ...

  10. HDU2048 神、上帝以及老天爷

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2048 看书发现了这道题,刚开始没理解题意,以为是中奖的概率,---> 1/n 后来知道了是典型的错排 ...