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. MVC发布后项目存在于根目录中的子目录中时的css与js、图片路径问题

    加载固定资源js与css <script src="@Url.Content("~/Scripts/js/jquery.min.js")" type=&q ...

  2. php 简单权限管理实现

    权限管理介绍.与简单实现思想 权限管理 此函数为模块访问权限管理 实现思路为:根据传进来的权限值,进入不同的权限获取区间,然后根据模块名字判断是否有这个模块的访问权限 使用说明:在每一个模块开始之前调 ...

  3. 10.Configure One-to-Many（配置一对多关系）【Code-First系列】

    现在,我们将学习怎么配置一对多的关系. Visit Entity Relationship section to understand how EF manages one-to-one, one-t ...

  4. clientTarget与用户代理别名

    将特定用户代理的别名添加到用户代理别名的内部集合中. 来自 <https://msdn.microsoft.com/zh-cn/library/6379d90d(v=vs.110).aspx&g ...

  5. Suggestion(搜索建议)产品和技术

    今天来简单聊聊Suggestion产品 什么是Suggestion服务? 一图胜千言: 当你想要搜索某个长词语或者一句话输入部分时,Suggestion服务预测你极大可能的候选项,并罗列出来,供你选择 ...

  6. Yii2:避免文件路径暴漏，代理访问文件

    制作背景:公司要做第三方文件管理系统,客户有时候需要直接访问文件,但是我们又不想暴露文件路径,才有这代理访问 基本功能介绍:读取txt文档.读取图片,如果有需要,可以通过插件读取doc.pdf文档, ...

  7. 【单页应用】view与model相关梳理

    前情回顾 根据之前的学习,我们形成了一个view与一个messageCenterview这块来说又内建了一套mvc的东西,我们这里来理一下首先View一层由三部分组成:① view② dataAdpt ...

  8. html基础大全(经典)

    HTML教程 一.HTML基础(人) 1.基础概念: 1.1.自动闭合标签和闭合标签(如出错html编写时不会报错) 自闭合:<mete  /> 闭合:<table>文字< ...

  9. iOS AppStore 申请加急审核

    1.在iTunes Connect 上面提交审核后,点击下面链接申请加急审核 链接:https://developer.apple.com/appstore/contact/appreviewteam ...

  10. HIVE 在执行大量数据JOIN的时候，容易产生内存不足的情况

    情况 很多时间遇到 "Caused by: java.lang.OutOfMemoryError: Java heap space" Caused by: java.lang.Ou ...