本文共 2289 字，大约阅读时间需要 7 分钟。
HTML5新的语义标签尽管有很多的好处，但是在低版本的老IE浏览器中还是存在兼容性问题的，常常让人感到头疼，到底是大胆的使用新标签还是使用传统的大量的DIV无义标签？今天就简单的看看H5新标签的兼容性处理方式。
首先来看一小段简单的代码：
HTML代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> < html > < head lang = "en" > < meta charset = "UTF-8" > < title >测试H5新标签兼容性</ title > < style > header, footer{width:50px; height: 50px; background-color: #f00;} </ style > </ head > < body > < header id = "header" >header</ header > < footer id = "footer" >footer</ footer > </ body > </ html > |
Google浏览器下：
IE6浏览器下：
很明显，header和footer在支持H5新标签的浏览器下已块级元素呈现，而在IE8及以下的浏览器中以文本呈现并且样式没有起作用，说明不被支持，那如何解决呢？
首先，第一种方法便是使用DOM操作来添加这些标签，既然浏览器不支持，那我自己来创建一个：
HTML代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> < html > < head lang = "en" > < meta charset = "UTF-8" > < title >测试H5新标签兼容性</ title > < script > document.createElement('header'); document.createElement('footer'); </ script > < style > header, footer{display: block; width:50px; height: 50px; background-color: #f00;} </ style > </ head > < body > < header id = "header" >header</ header > < footer id = "footer" >footer</ footer > </ body > </ html > |
这时候，我们再来看看IE6浏览器显示的效果：
红色的背景色可以显示出来了，说明通过document.createElement()这一方法是可行的，那为什么样式的宽高不起作用呢？因为添加的元素是内联元素，内联元素是没有宽高的，在了解这一点以后，我们再给案例中的header和footer添加一个"display: block;"属性，看看效果会有什么变化。
| 1 2 3 4 5 | < style > header, footer{display: block; width:50px; height: 50px; background-color: #f00;} </ style > |
IE6浏览器显示的效果：
现在显示的效果跟我们需要的就完全一样了，也就是说通过这种方法可以解决H5新标签在老IE浏览器中的兼容问题。但是，另外一个问题，那么多的新标签，如果每个都要通过这种方法去生产的话，是不是太麻烦了呢？
所以，我们现在介绍第二种方式，直接借用前辈大牛封装好的js库 --- html5shiv.js
HTML代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> < html > < head lang = "en" > < meta charset = "UTF-8" > < title >测试H5新标签兼容性</ title > < script src = "js/html5shiv.js" ></ script > </ head > < body > < header id = "header" >header</ header > < footer id = "footer" >footer</ footer > < script src = "js/jquery-1.11.0.min.js" ></ script > < script > $('#header').css('color','#f00'); $('#footer').css({'width':'100px','height':'100px', 'border':'1px solid #ddd', 'backgroundColor':'#f00'}); $('#header').html('我是一只小小鸟'); </ script > </ body > </ html > |
那我们现在直接打开IE6浏览器看效果：
完全可以实现我们想要的效果，而且操作更加的简单，代码量更少，大家不妨也可以在IE7和IE8浏览器中也测试一下。
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1839298
转载地址：http://nicpa.baihongyu.com/