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原理篇：3最长的一帧之地形(2：高度图)

           这一篇,接着上一篇,内容集中在高度图方式构建地球网格的细节方面.        此时,Globe对每一个切片(GlobeSurfaceTile)创建对应的TileTerrain类,用来维 ...

  2. 使用 gpg 加密文件 - 通过 shell 或 php

    使用 gpg 加密文件 - 通过 shell 或 php 背景:客户提供私钥,并要求我方通过php把加密后的文件传输给他们. 环境 macOS Sierra 10.12.1 php 7.0.8 0.安 ...

  3. WebGIS开源方案中空间数据的入库、编辑、发布的操作流程

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 本开源方案的构架是:geoserver(服务器)+tomca ...

  4. SFC中的问题描述

    本文主要描述了在大规模的网络环境中部署服务功能存在的一些问题,还提出了几个关键领域,即SFC工作组将要探讨的关于SFC结构.工作协议.相关文档. 1.问题描述 SFC工作组致力于解决的几个服务部署中存 ...

  5. 转:C语言中的头文件可以自己写吗？

    转自:http://www.eefocus.com/computer00/blog/08-09/155791_9ebdc.html 一些初学C语言的人,不知道头文件(*.h文件)原来还可以自己写的. ...

  6. 1.JAVA中使用JNI调用C++代码学习笔记

    Java 之JNI编程1.什么是JNI? JNI:(Java Natibe Inetrface)缩写. 2.为什么要学习JNI?  Java 是跨平台的语言,但是在有些时候仍然是有需要调用本地代码 ( ...

  7. 本周博客--WinForm线程初步 2014-10-31 09:15 54人阅读 评论(0) 收藏

    嗯,WinForm作为一个比较程序的微软的技术已经为我们服务了很久很久,在技术不断更新的今天WinForm虽显老态龙钟但是在客户端快速开发中,它的地位还是无可取代的 今天就来分享一下WinForm中的 ...

  8. 【开源框架】SqlSugarRepository 全库ORM 正式发布

    SqlSugarRepository.dll 全库开发框架支持 四种数据库:SqlServer. MySql .Oracle和Sqlite. SqlSugarRepository是为全库开发而生的OR ...

  9. react初始（2）

    既然我开始了react的学习,就没有停下来的理由了,我应该很幸运我还有这个时间去学习react,我不认为我聪明,但是我认为我够努力.我先在或许是一个不知道未来该是怎样的人,我们的迷茫和无知源于你不去接 ...

  10. HtmlHelper拓展实现RadioList

    mvc中HtmlHelper可以帮助我们生成许多Html控件,但是没有类似DropDownList的RadioList,但是发现这些方法都是拓展方法,于是就想自己也拓展一个RadioList 从网上下 ...