您当前的位置:首页 > 学习专区 > JAVA技术

如何让所有浏览器兼容HTML5

时间:2017-04-19 14:05:43    作者:严老师

  浏览器总是不断更新的,所以在编程的时候总是会出现浏览器不兼容的情况。当然,现在大部分的浏览器都是能够兼容HTML5的,但是如果有人用的是之前的浏览器呢?所以我们需要考虑这些问题,让这些浏览器也能支持HTML5。
  1、设置css的display属性值为block。
  例子:
  header, section, footer, aside, nav, main, article, figure {
  display: block;
  }
  2、为 HTML 添加新元素
  例子:
  该实例向 HTML 添加的新的元素,并为该元素定义样式,元素名为 <myHero> :
  <!DOCTYPE html>
  <html>
  <head>
  <title>Creating an HTML Element</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 浏览器问题
  3、你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素,但是:
  Note  Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。
  幸运的是, Sjoerd Visscher 创建了 "HTML5 Enabling JavaScript", " shiv":
  <!--[if lt IE 9]>
  <script src=""></script>
  <![endif]-->
  以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。
  注意:国内用户请使用百度静态资源库(Google 资源库在国内不稳定):
  <!--[if lt IE 9]>
  <script src=""></script>
  <![endif]-->
  4、针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。
  完美的 Shiv 解决方案
  实例
  <!DOCTYPE html>
  <html>
  <head>
  <title>Styling HTML5</title>
  <!--[if lt IE 9]>
  <script src=""></script>
  <![endif]-->
  </head>
  <body>
  <h1>我的第一篇文章</h1>
  <article>
  London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
  </article>
  </body>
  </html>
  html5shiv.js 引用代码必须放在 <head> 元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
  浏览器兼容问题是一个程序员一定要考虑的问题,要知道用户是有各种可能性的,所以一定要尽可能的想到各种情况,如果网站上线才发现浏览器不兼容,带来的用户体验也是不好的。

推荐资讯
UI设计师
UI设计师
JAVA软件工程师课程
JAVA软件工程师课程
.NET软件工程师课程
.NET软件工程师课程
软件开发工程师课程
软件开发工程师课程
相关文章
    无相关信息
栏目更新
栏目热门