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