现代的浏览器基本都支持 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. ambari2.4.2_centos7 学习全纪录

    目录: 为什么要用Ambari 概念概述 原理简介 安装 创建集群 创建集群 手动修改配置 NameNode HA 安装SmartSense 二次开发 为什么要用Ambari Ambari 是 Apa ...

  2. nginx 网站搭建

    nginx目录详解 默认nginx做了nginx配置文件的备份 #查看nginx配置文件去掉#号的内容,并且追加到nginx.conf.tmp egrep -v "#|^$" ng ...

  3. php类中的魔术方法

    1.构造函数 析构函数class pt{ function __construct($data) { echo "pt is start ..."; $this->pr($d ...

  4. shell两数之间的算术运算

    #!/bin/bash read -p "请输入第一个数:" a read -p "请输入第二个数:" b echo "$a+$b=$[$a+$b]& ...

  5. ubuntu kylin 14.04安装搜狗输入法

    1.卸载原有的输入法,fcitx或ibus.如卸载fcitx: sudo apt-get remove fcitx*(如不需保留配置文件用purge) sudo apt-get autoremove( ...

  6. 腾讯php经历

    12年毕业至今,一年C#,2年php,几个月node,因为一些原因再次离职,接到腾讯互娱的php面试电话,匆匆准备了一番,便去了科兴科技园腾讯的高大上办公楼. 1.笔试 试题大部分网上都有,例如: 用 ...

  7. 2、实现不同子网之间的信息交流(互相可以PING通)

    一.环境: 二个不同的虚拟子网 VMnet1: 192.168.155.0/24 VMnet8: 192.168.170.0/24 编辑 --> 虚拟网络编辑器 (查看自己的子网,相应修改就行) ...

  8. 同步降压DC-DC转换IC——XC9264

    设计一个12V转3.3V,输出电流30mA的电源电路,由于项目对转化效率要求较高,所以不能采用低压差线性稳压LDO的方案.经过对比,TOREX的XC9264效率在此转化条件下效率可做到85%以上,比M ...

  9. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  10. C#/ASP.NET定时任务执行管理器组件–FluentScheduler定时器

    必须JobManager初始化 方式1: public void Start()         {             JobManager.AddJob(() => FetchingDa ...