你可以学会如何使用旧的浏览器正确处理新的HTML5.


HTML5 浏览器支持

HTML5 支持所有现代浏览器.

此外,所有的浏览器,旧的和新的,自动处理未被识别的元素作为内联元素.

因为这样,你可以“告诉”的旧的浏览器来处理“未知”的HTML元素.

甚至可以教IE6(XP 2001)如何处理未知的HTML元素.

定义语义元素作为块元素

HTML5定义八个新的语义元素。所有这些都是块级元素。.

在旧浏览器中确保正确的行为,你可设置元素的 display属性为block:

  1. header, section, footer, aside, nav, main, article, figure {
  2. display: block;
  3. }

加入新的元素到HTML

你也能添加新的元素到HTML页面.

这个实例添加一个新的元素叫做 <myHero> 到HTML页面, 并且定义了一个样式:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>享学课堂</title>
  6. <script>document.createElement("myHero")</script>
  7. <style>
  8. myHero {
  9. display: block;
  10. background-color: #dddddd;
  11. padding: 50px;
  12. font-size: 30px;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <h1>一个标题</h1>
  18. <myHero>我的英雄元素</myHero>
  19. </body>
  20. </html>

让我试试

JavaScript 语句 document.createElement("myHero") 需要创建在IE 9或更早的版本中.

使用IE8的问题

你可以使用上面描述的解决方案为所有新的HTML5元素.

然而, IE8 (和更早的版本) 不允许未知元素的样式!

幸运的是, Sjoerd Visscher 创建了 HTML5Shiv! HTML5Shiv 是一个JavaScript类库,可以使IE9或者更早的版本识别新的HTML5元素。

为了兼容IE9或者更早的版本,你将需要html5shiv.

HTML5Shiv 语法

HTML5Shiv 被放在<head> 标签里面.

HTML5Shiv 是一个javascript文件,通过<script>标签引用.

当你使用新的HTML5元素,例如: <article>, <section>, <aside>, <nav>, <footer>时,你可以使用HTML5Shiv来兼容旧的IE浏览器。

你可以从github下载最新的HTML5shiv版本或者使用CDN https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

语法

  1. <head>
  2. <!--[if lt IE 9]>
  3. <script src="/js/html5shiv.js"></script>
  4. <![endif]-->
  5. </head>

HTML5Shiv 实例

如果你不想下载和存储html5shiv在您的网站上,你可以参考在CDN网站的版本.

HTML5Shiv 脚本必须放在<head>元素里面, 样式如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <!--[if lt IE 9]>
  6. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  7. <![endif]-->
  8. <title>享学课堂</title>
  9. </head>
  10. <body>
  11. <section>
  12. <h1>著名城市</h1>
  13. <article>
  14. <h2>伦敦</h2>
  15. <p>伦敦是英国的首都。它是英国人口最多的城市,拥有超过1300万居民的大都市.</p>
  16. </article>
  17. <article>
  18. <h2>巴黎</h2>
  19. <p>巴黎是法国首都和人口最多的城市.</p>
  20. </article>
  21. <article>
  22. <h2>东京</h2>
  23. <p>东京是日本的首都,东京大区的中心,也是世界上人口最多的大都市区.</p>
  24. </article>
  25. </section>
  26. </body>
  27. </html>

让我试试


本文转自:http://codingdict.com/article/1450

HTML5浏览器的更多相关文章

  1. HTML5 简介、HTML5 浏览器支持

    HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. HTML5 简单易学. 什么是 HTML5? HTML5 ...

  2. Html5浏览器支持

    HTML5 浏览器支持 把 HTML5 元素定义为块级元素 语义块级displayblock实例 header, section, footer, aside, nav, main, article, ...

  3. HTML5 浏览器支持

    css重置 header, section, footer, aside, nav, main, article, figure { display: block; } 为HTML添加新的元素 < ...

  4. [转载]HTML5浏览器测试网站汇总

    http://www.cnblogs.com/javawebsoa/archive/2012/04/19/2458224.html 浏览器支持情况统计 When Can IUse:图表经常更新,展示了 ...

  5. HTML5 浏览器返回按钮/手机返回按钮事件监听

    1.HTML5  History对象 支持使用pushState()方法修改地址栏地址,而不刷新页面. popstate事件 当history实体被改变时,popstate事件将会发生.调用pushS ...

  6. HTML5浏览器嵌入窗口程序解决方案

    浏览器嵌入窗口程序一直以来就是WEB应用程序的首选方案,这种方案只需要实现一个主窗口,并提供一些接口供脚本调用,内部的界面和逻辑处理全部用html,css,javascript去实现.我最早看到的相关 ...

  7. HTML5浏览器支持及兼容性处理

    1.现代的浏览器都支持HTML5. 2.所有浏览器不管是新的还是旧的对无法识别的元素会作为内联元素自动处理. 3.HTML5定义了8个HTML语义元素,所有这些元素都是块级元素,为了能让旧版本的浏览器 ...

  8. Html5浏览器缓存 sessionStorage 与 localStorage

    一.sessionStorage: 浏览关闭会话结束就被清除:(不能跨页面) localStorage:永久保存: 二.使用 var storage = window.sessionStorage; ...

  9. html5 浏览器端数据库

    为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage  — 本地存储  可 ...

随机推荐

  1. LintCode之主元素

    题目描述: 分析:由题目可知这个数组不为空且该主元素一定存在,我选用HashMap来存储,HashMap的存储结构是”键—值对“,”键“用来存储数组元素,”值“用来存储这个元素出现的次数,然后循环遍历 ...

  2. CAD到ArcGIS相关操作

    1.Ctrl+N(新建图形)→复制原数据,粘贴到原坐标 2.将CAD数据转为矢量数据方法众多,此处将提供三种方法: 方法一:CAD转地理数据库注记 在[ArcToolBox]窗口中,双击[转换工具]→ ...

  3. react-native 异常处理 Execution failed for task ':app:mergeDebugResources'.

    1.react-native run-android 失败 * What went wrong:Execution failed for task ':app:mergeDebugResources' ...

  4. ES命令

    基础概念 Elasticsearch有几个核心概念.从一开始理解这些概念会对整个学习过程有莫大的帮助.   接近实时(NRT)        Elasticsearch是一个接近实时的搜索平台.这意味 ...

  5. kali 修改MariaDB密码

    use mysql; update user set authentication_string=PASSWORD("") where User='root'; update us ...

  6. C#将数据写入本地文件

    在平时开发过程中,可能会碰到内网测试没问题,但是更新到外网时会报错,这时我们又无法在外网进行调试.如果我们分析完业务可能产生的问题还是无法得到报错的原因,那么可以在关键的地方加上异常处理,然后将异常或 ...

  7. jQuery防止中文乱码

    window.location.href = "?supplier=" + escape($("#ddlUser").val()) + "&t ...

  8. 关于this、Echarts中的data

    this是指当前对象 移除class的jQuery代码:$('ur.nav li:eq(0)').removeClass('active') 添加class的jQuery代码:$('ur.nav li ...

  9. 《JAVA设计模式》之策略模式(Strategy)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述策略(Strategy)模式的: 策略模式属于对象的行为模式.其用意是针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它 ...

  10. [BZOJ2138]stone(Hall定理,线段树)

    Description 话说Nan在海边等人,预计还要等上M分钟.为了打发时间,他玩起了石子.Nan搬来了N堆石子,编号为1到N,每堆 包含Ai颗石子.每1分钟,Nan会在编号在\([L_i,R_i] ...