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. Cesium原理篇：7最长的一帧之Entity(下)

    上一篇,我们介绍了当我们添加一个Entity时,通过Graphics封装其对应参数,通过EntityCollection.Add方法,将EntityCollection的Entity传递到DataSo ...

  2. 由面试引发的思考：B/S与C/S究竟是何物

    一.现状说明: 就在这金三银四的求职黄金时期,我有幸作为公司的独立技术面试官,拥有最终决定录用权,在倍受上级领导的充分信任下,我也向上级保证,一定要为公司找到合适的人才,就在我满怀信心的情况下面试了一 ...

  3. GridView的使用

    首先,gridview是封装好的,直接在设计界面使用,基本不需要写代码: 一.绑定数据源 GridView最好与LinQDatasourse配合使用,相匹配绑定数据: 二.样式控制 1.自动套用样式 ...

  4. QT5.1 调用https

    以VS开发为例.因为https访问需要用到SSL认证,而QT默认是不支持SSL认证,所以在使用之前必须先做一些准备工作: 需要安装OpenSSL库: 1.首先打开http://slproweb.com ...

  5. SQL分页查询的几种方式

    需求:查询表dbo.Message,每页10条,查询第2页 1:TOP() ) * FROM dbo.Message WHERE Code NOT IN () Code FROM dbo.Messag ...

  6. WPF CheckBox 自定义样式

    WPF 自定义样式.CheckBox <Style x:Key="EmptyCheckBox" TargetType="CheckBox"> < ...

  7. [WCF编程]12.事务：Transaction类

    一.概述 .NET2.0在命名空间System.Transactions下提供了Transaction类,它表示所有.NET事务管理器使用的事务. [Serializable]public class ...

  8. win10平台mysql5.6.34免安装版(绿色版zip)的配置以及密码和编码设置

    平台:win10 X64 mysql: mysql-5.6.34-winx64.zip 以下所写都是本人测试过的,力争无误.上次发布了,可是发现了一些问题,特地查了一下官方文档(我会说我是用有道词典翻 ...

  9. os模块汇总

    os.name 输出字符串指示正在使用的平台.如果是window 则用'nt'表示,对于Linux/Unix用户,它是'posix'. os.getcwd() 函数得到当前Python脚本工作的目录路 ...

  10. php 实现设计模式之 建造者模式

    <?php /** * 建造者模式 * ------------- * 定义:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. * 类型:创建类模式 * 四个要素: * ...