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 ...
随机推荐
- 如何做好一个Sprint Demo
我列出了一些关于如何做好一个Demo(演示)的建议.我想通过以下四个步骤可以做出一个较好的Demo. 第一步:准备Demo故事 以真实用户使用软件的方式进行Demo.关键点不在于演示软件如何工作,而是 ...
- C#语言基础——函数
函数一个较大的程序一般应分为若干个程序块,每一个模块用来实现一个特定的功能.所有的高级语言中都有子程序这个概念,用子程序实现模块的功能.在C#语言中,子程序的作用是由一个主函数和若干个函数构成.由主函 ...
- 代码管理工具 --- git的学习笔记一《git的个人开发》
重点摘要: 创建了一个文件后首先先通过git add . 添加到暂缓区,然后通过git commit -m "提交的名字" 提交到本地仓库,最后才可能push到远程仓库. 1. 个 ...
- PIC12F508/505/509/510/506/519/526/527单片机破解芯片解密方法！
IC芯片解密PIC12F508/505/509/510/506/519/526/527单片机破解 单片机芯片解密型号: PIC12F508解密 | PIC12F505解密 | PIC12F506解密 ...
- [LeetCode] Hamming Distance 汉明距离
The Hamming distance between two integers is the number of positions at which the corresponding bits ...
- [LeetCode] Remove K Digits 去掉K位数字
Given a non-negative integer num represented as a string, remove k digits from the number so that th ...
- [LeetCode] Reconstruct Itinerary 重建行程单
Given a list of airline tickets represented by pairs of departure and arrival airports [from, to], r ...
- AppBox v6.0中实现子页面和父页面的复杂交互
前言 1. AppBox是捐赠开源(获取源代码至少需要捐赠作者 1 元钱),基于的 FineUI(开源版)则是完整开源,网址:http://fineui.codeplex.com/ 2. 你可以通过捐 ...
- FineUI（专业版）v3.2.0 发布（ASP.NET UI控件库）！
+2016-08-20 v3.2.0 +表格增强. +表格列RenderField增加属性ClientHtmlEncode,用于在客户端进行HTML编码. -增加示例:单元格编辑->杂项-> ...
- 基于centos的lnmp搭建
部署lnmp环境 安装配置mariadb配置php配置phpmyadmin配置php-fpm配置nginx配置测试 LNMP(linux,nginx,mariadb,php)部署,以下默认在root权 ...