HTML5 大法固然好,但是有一个致命的问题就是 IE9 以下基本不支持,所以很多东西就要考虑兼容性。

一、语义化(自定义标签)的兼容

问题出现在 IE9- 的浏览器

我使用的都是粗暴解决的,我觉得很不错,且一直在用:

1. 语义化的标签display

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

不过上面的方法有一个比较麻烦的就是 不可能自己定义一个标签就进行display

2. 按需加载js进行转换 使用 html5shiv

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

二、视频和音频的兼容

现在也比较流行在网站的首屏中来个不大的视频(前提是你能加载的出来),效果很不错。

html5 的 viedoaudio 是不错的选择,不过也存在兼容的问题,而且最麻烦的就是不同的浏览器竟然支持不同的音频文件,这就让人就很无奈。

3-1.jpg

以音频距离,首先为了照顾不同的浏览器,需要不同的音频文件:

<audio controls>
  <source src="demo.ogg" type="audio/ogg">
  <source src="demo.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

如果一旦不支持的时候,使用 embed ,不过会提示只需要安装插件

<audio controls="controls" height="100" width="100">
  <source src="demo.ogg" type="audio/ogg" />
  <source src="demo.mp3" type="audio/mpeg" />
  <embed height="100" width="100" src="song.mp3" />
</audio>