HTML5的浏览器支持方案
现代的浏览器基本都支持 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的浏览器支持方案的更多相关文章
- HTML5 API 浏览器支持情况检测
HTML5发展到现在,虽说没有大规模的普及,但在我们日常生活中,也很容易见到了,HTML5的游戏.网站.应用也是层出不穷.而作为前端人员,也应该多了解这些API为以后应用打基础,下面我将给大家介绍 H ...
- CSS3&HTML5各浏览器支持情况一览表
http://fmbip.com/ CSS3性质(CSS3 Properties) 平台 MAC WIN 浏览器 CHROME FIREFOX OPERA SAFARI CHROME FIREFOX ...
- HTML5 移动浏览器支持
- [HTML5] 让IE支持HTML5的方法
越来越多的站点开始使用 HTML5 标签,但是目前的情况是还有很多人在使用IE6.IE7.IE8.为了让所有浏览者都可以正常的访问,解决方案有下面两个: 1.为网站创建多套模板,通过程序对User-A ...
- HTML5 简介、浏览器支持、新元素
什么是 HTML5? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供 ...
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- html5shiv.js-让IE浏览器支持HTML5标准
兼容性IE8及以下IE版本 浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题. <!–[if IE]> ...
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- HTML5 简介、HTML5 浏览器支持
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. HTML5 简单易学. 什么是 HTML5? HTML5 ...
随机推荐
- MVC中的BASE.ONACTIONEXECUTING(FILTERCONTEXT) 的作用
一句话,就是调用base.OnActionExecuting(filterContext)这个后,才会执行后续的ActionFilter,如果你确定只有一个,或是不想执行后续的话,那么可以不用调用该语 ...
- JSON学习笔记一 —— 一些与移动端交互产生JSON数据的方法
/** * 测试的返回JSon方法,正式的不会用 * @author MrHandler * @param reqCode * @param joinStr * ...
- 例解 Linux cd 命令
cd 命令是 *nix 系统中最基本的命令,它所做的事情是改变你当前所在的目录.本文详细介绍该命令,它所能完成的功能以及关于该命令内在的东西. cd 命令:一个内置命令 BASH Shell 是大多 ...
- 子DIV设置margin-top影响父DIV位置的解决办法
父div如果没有任何东西,子div设置margin-top,父div会下落 <!DOCTYPE html> <html lang="en"> <hea ...
- 《中国文明史》系列—外柔 VS 内厉
读启良的<中国文明史>,里面有谈到外柔而内厉——中国政府自古以来奉行的准则.大致意思是说,我华夏民族对待周边民族,历来是很友好的,即所谓的“柔”,而对待自己人,向来是“刚”或曰“厉”的. ...
- NC 销售订单
主表:so_sale,主键:csaleid 子表1:so_saleorder_b 主键:corder_bid 子表2:so_saleexecute 主键:csale_bid 要求子表1和子表2 主键相 ...
- iOS学习-UIButton的imageView和titleLabel
UIButton的imageView和titleLabel的位置设置通过setImageEdgeInsets和setTitleEdgeInsets来设置 参考:http://blog.csdn.net ...
- 八月22日，django知识点总结：
八月22日,知识点总结: python manage.py makemigrations python manage.py migrate unique=true是指这个字段的值在这张表里不能重复,所 ...
- 【hrbust2294】方方正正
题意 哈理工2016级新生程序设计全国邀请赛C题 一个r行c列的01矩阵,告诉你每行的和.每列的和,问是否存在这样的矩阵? 题解 首先,行和和列和之和要相等,否则一定是NO. 然后根据Gale-Rys ...
- Jetson ARM SeetaFace编译
SeetaFace简介 SeetaFace依赖于OpenCV,对于Tegra on Ubuntu,Nvidia提供libopencv4tegra并且可以使用Cuda加速. 准备工作 1.阅读OpenC ...