开发者社区> 技术小牛人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

HTML5新标签的兼容性处理

简介:
+关注继续查看

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浏览器下:

wKioL1ey2Cri3NrNAAACpEaHj8A196.png-wh_50

IE6浏览器下:

wKiom1ey1n_Cs1FUAAAS0_1tD9Y651.png-wh_50

很明显,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浏览器显示的效果:

wKiom1ey2XDCbBiOAAASnur8QPI076.png-wh_50

红色的背景色可以显示出来了,说明通过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浏览器显示的效果:

wKiom1ey2uKhUZ0fAAAUoDgY2_c371.png-wh_50

现在显示的效果跟我们需要的就完全一样了,也就是说通过这种方法可以解决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浏览器看效果:

wKiom1ey3GazUPc6AAAVcCDqk0M824.png-wh_50


完全可以实现我们想要的效果,而且操作更加的简单,代码量更少,大家不妨也可以在IE7和IE8浏览器中也测试一下。

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1839298

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML知识积累及实践(三) - 列表标签
HTML知识积累及实践(三) - 列表标签
0 0
HTML标签中英文对照
标签 对应英文 说明 <!-- 内容 --> 注释 <!DOCTYPE> document type a anchor ['æŋkə] 锚超链接 abbr abbreviation [əbriːvɪ’eɪʃ(ə)n] 缩写缩写词 acronym acronym ['ækrənɪm] 首字母缩略词缩写词 address address [ə’dres] 地址联系信息
0 0
正则表达式匹配html标签,获取标签内容
正则表达式匹配html标签,获取标签内容
0 0
NSString去掉html标签
NSString去掉html标签
0 0
IOS过滤Html标签
IOS过滤Html标签
0 0
12小时爆肝HTML常见标签及详细解析(有详细代码解析和结果解析)
12小时爆肝HTML常见标签及详细解析(有详细代码解析和结果解析)
0 0
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
0 0
HTML中的img标签
HTML中的img标签
0 0
HTML中的基本标签
HTML中的基本标签
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载