现代的浏览器基本都支持 HTML5,此外还有老浏览器。

不管是旧的还是最新的,HTML5对无法识别的元素会作为内联元素自动处理。

所以,在这里教大家怎么让浏览器去处理“未知”的HTML元素。

甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素。

一、将HTML5元素定义为块元素

HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级 元素。

为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block;

header, section, footer, aside, nav, main, article, figure {
display: block;
}

二、为HTML添加新元素

你可以为 HTML 添加新的元素。

下面的实例向 HTML 添加的新的元素,并为该元素定义样式,元素名为 myHero :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> <myHero>我的第一个新元素</myHero> </body>
</html>

JavaScript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。

Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

三、Internet Explorer 浏览器问题

可以使用以上的方法来为 IE 浏览器添加 HTML5 元素,但是:

Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:

<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。

四、完美的 Shiv 解决方案

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head> <body> <h1>我的第一篇文章</h1> <article>
完美的 Shiv 解决方案
</article> </body>
</html>

html5shiv.js 引用代码必须放在 元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

参考链接:http://www.runoob.com/html/html5-browsers.html

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

定义文档兼容性,让IE按指定的版本解析我们的页面

HTML5的浏览器支持方案的更多相关文章

  1. HTML5 API 浏览器支持情况检测

    HTML5发展到现在,虽说没有大规模的普及,但在我们日常生活中,也很容易见到了,HTML5的游戏.网站.应用也是层出不穷.而作为前端人员,也应该多了解这些API为以后应用打基础,下面我将给大家介绍 H ...

  2. CSS3&HTML5各浏览器支持情况一览表

    http://fmbip.com/ CSS3性质(CSS3 Properties) 平台 MAC WIN 浏览器 CHROME FIREFOX OPERA SAFARI CHROME FIREFOX ...

  3. HTML5 移动浏览器支持

  4. [HTML5] 让IE支持HTML5的方法

    越来越多的站点开始使用 HTML5 标签,但是目前的情况是还有很多人在使用IE6.IE7.IE8.为了让所有浏览者都可以正常的访问,解决方案有下面两个: 1.为网站创建多套模板,通过程序对User-A ...

  5. HTML5 简介、浏览器支持、新元素

    什么是 HTML5? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供 ...

  6. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  7. html5shiv.js-让IE浏览器支持HTML5标准

    兼容性IE8及以下IE版本 浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题. <!–[if IE]> ...

  8. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

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

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

随机推荐

  1. Sql Server 2016新功能之 Row-Level Security

    Sql Server 2016 有一个新功能叫 Row-Level Security ,大概意思是行版本的安全策略(原来我是个英语渣_(:з」∠)_) 直接上例子.这个功能相当通过对表添加一个函数作为 ...

  2. 常见的高可用MySQL解决方案

    MySQL数据库作为最基础的数据存储服务之一,在整个系统中有着非常重要的地位,因此要求其具备高可用性是无可厚非的.有很多解决方案能实现不同的SLA(服务水平协定),这些方案可以保证数据库服务器在硬件或 ...

  3. inotify+rsync实现实时同步部署

    1.1.架构规划 1.1.1架构规划准备 服务器系统 角色 IP Centos6.7 x86_64 NFS服务器端(NFS-server-inotify-tools) 192.168.1.14 Cen ...

  4. Linux系统下面挂载u盘

    1.先插好u盘到Linux服务器,然后查看u盘挂载到哪个目录下面. [root@localhost ~]# /sbin/fdisk -l 2.挂载到u目录下面 [root@localhost ~]# ...

  5. Python version 3.4 required, which was not found in the registry.解决

    问题描述: 在Win7环境下已安装Python3.4,准备安装numpy和nltk,运行安装程序报如题错误,具体解决方案如下: 1.将LOCAL_MACHINE\software\python\Pyh ...

  6. 运行python程序

    1 在windows下运行python程序 1)从DOS命令行运行python脚本 用python解释器来执行python脚本,在windows下面python解释器是python.exe,我的pyt ...

  7. .数据库连接池技术:DBCP和C3P0

    数据库连接池技术:DBCP和C3P0 1.什么是数据库连接池 已知的方法是需要访问数据库的时候进行一次数据库的连接,对数据库操作完之后再释放这个连接,通常这样业务是缺点很明显的: 用户每次请求都需要向 ...

  8. angularJS(3)

      angularJS(3) 一.angularJs的指令模型ng-model指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. 为应用程序数据提供类型验证(number.email ...

  9. <转>MySQL性能调优的10个方法

    文章原地址:http://mp.weixin.qq.com/s/oRXJRz_Y5drmIrcbxSKOcw 1. 选择合适的存储引擎: InnoDB 除非你的数据表使用来做只读或者全文检索 (相信现 ...

  10. 前端性能优化---yahoo军规

    一.尽可能减少HTTP请求数 二.使用CDN(内容分发网络) 三.添加Expire/Cache-Control头 四.启用Gzip压缩 五.将CSS放在页面最上面 六.将Script放在页面最下面 七 ...