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最长的一帧之地形(1)

    前面我们从宏观上分析了Cesium的整体调度以及网格方面的内容,通过前两篇,读者应该可以比较清楚的明白一个Tile是怎么来的吧(如果还不明白全是我的错).接下来,在前两篇的基础上,我们着重讨论一下地形 ...

  2. C#中DataTable转化为List<T>解析

    在.net项目中使用到DataTable和List<T>集合的地方较多, 泛型的好处: 它为使用c#语言编写面向对象程序增加了极大的效力和灵活性.不会强行对值类型进行装箱和拆箱,或对引用类 ...

  3. jquery.mobile手机网页简要

    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...

  4. JSP自定义tag

    前端需要调用后端的配置,想起velocity-tools.然而jsp的话,目前只能想到tag和EL表达式了. Tag相当好写,jsp2.0提供了简化写法: 编写一个java类: public clas ...

  5. Java进击C#——语法之ADO.NET

    本章简言 上一章讲到关于C#语法的基础部分.了解相关的基础部分之后我们就要去了解一下C#是什么样子访问数库的.C#把访问数据库这一部分的知识点叫作ADO.NET.即是JAVA常常讲到的JDBC这一部分 ...

  6. 分离与继承的思想实现图片上传后的预览功能：ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

  7. Android Permission 访问权限大全（转）

    程序执行需要读取到安全敏感项必需在androidmanifest.xml中声明相关权限请求, 完整列表如下: android.permission.ACCESS_CHECKIN_PROPERTIES允 ...

  8. 采花 bzoj 2743

    采花(1s 128MB)flower [题目描述] 萧芸斓是Z国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花.花园足够大,容纳了n朵花,花有c种颜色(用整 ...

  9. [moka同学笔记]四、Yii2.0课程笔记（魏曦老师教程）[匿名函数的使用操作]

    在评论页面中index.php中 [ 'attribute'=>'status', 'value'=>'status0.name', 'filter'=>Commentstatus: ...

  10. tarjan讲解（用codevs1332（tarjan的裸题）讲解）

    主要借助这道比较裸的题来讲一下tarjan这种算法 tarjan是一种求解有向图强连通分量的线性时间的算法.(用dfs来实现) 如果两个顶点可以相互通达,则称两个顶点强连通.如果有向图G的每两个顶点都 ...