1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <!--[if IE]>
  7. <script type="text/javascript">
  8. (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(','),i=e.length;while(i--){document.createElement(e[i])}})();
  9. </script>
  10. <![endif]-->
  11. </head>
  12. <style type="text/css">
  13. header,nav,aside,article,footer{ display:block;}
  14. </style>
  15. <body>
  16. <header>
  17. <p class="f_r"><a>手机访问</a>|<a>网站地图</a>|<a>来院路线</a>|<a>收藏本站</a></p>
  18. </header>
  19. <nav>
  20. <ul>
  21. <li>导航一</li>
  22. <li>导航二</li>
  23. <li>导航三</li>
  24. </ul>
  25. </nav>
  26. <article>内容</article>
  27. <aside>
  28. 栅栏
  29. </aside>
  30. <footer>
  31. <p>备案信息</p>
  32. </footer>
  33. </body>
  34. </html>
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<!--[if IE]>

<script type="text/javascript">

(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(','),i=e.length;while(i--){document.createElement(e[i])}})();

</script>

<![endif]-->

</head>

<style type="text/css">

header,nav,aside,article,footer{ display:block;}

</style>

<body>

<header>

	<p class="f_r"><a>手机访问</a>|<a>网站地图</a>|<a>来院路线</a>|<a>收藏本站</a></p>

</header>

<nav>

	<ul>

    	<li>导航一</li>

        <li>导航二</li>

        <li>导航三</li>

    </ul>

</nav>

<article>内容</article>

<aside>

	栅栏

</aside>

<footer>

	<p>备案信息</p>

</footer>

</body>

</html>

其中的代码如下，通过JS创建HTML5标签下载地址

  1. <!--[if IE]>
  2. <script type="text/javascript">
  3. (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(','),i=e.length;while(i--){document.createElement(e[i])}})();
  4. </script>
  5. <![endif]-->
<!--[if IE]>

<script type="text/javascript">

(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(','),i=e.length;while(i--){document.createElement(e[i])}})();

</script>

<![endif]-->

其中的代码如下，这些标签本身就是块级标签，所以把这些标签转成块级标签

  1. header,nav,aside,article,footer{ display:block;}
header,nav,aside,article,footer{ display:block;}

效果图：

HTML5 兼容IE浏览器的更多相关文章

  1. 一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器

    基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...

  2. [转载]html5直接在网页上播放视频音频兼容所有浏览器

    文章给大家分享一个html5直接在网页上播放视频兼容所有浏览器,有需要的同学可参考. HTML5可以用video标签来播放视频 当前,video 元素支持三种视频格式: 格式 IE Firefox O ...

  3. 【转】让Bootstrap 3兼容IE8浏览器

    FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...

  4. 【转】向HTML中插入视频并兼容所有浏览器的方法

    原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...

  5. 让Bootstrap 3兼容IE8浏览器

    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...

  6. Bootstrap 3兼容IE8浏览器（转）

    Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...

  7. Bootstrap 3 兼容 IE8 浏览器

    公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动 ...

  8. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

  9. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

随机推荐

  1. C# 操作数据库表和数据库

    <1>c#创建数据库表: private void CreatTable(string name)      //创建数据库源数据表,name为表名 { con.ConnectionStr ...

  2. SQL 性能优化-查询优化(like查询)

    废话不说,上代码 SET STATISTICS IO ON SELECT * FROM dbo.T_AssNews WHERE Content LIKE '%会%' 花费时间 执行计划 一个百分号的代 ...

  3. 关于Java语言和面向对象记录

    本科时常用的c语言是面向过程的语言,而Java是面向对象的语言 Java语言的11个关键术语 简单性.可移植性.面向对象.分布式.高性能.解释型.健壮性.多线程.安全性.动态性.体系结构中立 面向对象 ...

  4. 21、ASP.NET MVC入门到精通——ASP.NET MVC4优化

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 删除无用的视图引擎 默认情况下,ASP.NET MVCE同时支持WebForm和Razor引擎,而我们通常在同一个项目中只用到了一种视图引擎 ...

  5. jQuery AutoComplete 自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

  6. 移动端UC /QQ 浏览器的部分私有Meta 属性

    <meta name="format-detection" content ="telephone=no"/>   格式检测 禁止识别我们页面中的数 ...

  7. c++对象池使用

    // // ObjectPool.h // DragonBall // // Created by user on 13-8-22. // // #include <iostream> # ...

  8. 关于jquery中用函数来设置css样式

    关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...

  9. Dev TreeList 总结

    1.表格的要求:如果要求有父子节点关系,则必须有ID和ParentID字段,并且父节点ParentID字段必须指向ID字段. 2.Access表格在穿入DATATABLE的时候,要想表现出父子节点关系 ...

  10. centos虚拟机复制移动后网络配置无效

    移植Centos虚拟机后无法联网解决1.迁移以后,会存在其中一个网卡无法启动(eth0 or eth1) [root@ ~]# ifup eth0 WARNING: Deprecated config ...