-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
沉沙
2018-09-20
来源 ：
阅读 1741
评论 0
摘要：本篇教程探讨了HTML5教程 新标签的兼容性处理，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了HTML5教程 新标签的兼容性处理，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
<
HTML5新的语义标签尽管有很多的好处，但是在低版本的老IE浏览器中还是存在兼容性问题的，常常让人感到头疼，到底是大胆的使用新标签还是使用传统的大量的DIV无义标签？今天就简单的看看H5新标签的兼容性处理方式。首先来看一小段简单的代码：HTML代码：<!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代码：<!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;"属性，看看效果会有什么变化。<style>
header, footer{display: block;
width:50px; height: 50px;
background-color: #f00;}
</style>IE6浏览器显示的效果：现在显示的效果跟我们需要的就完全一样了，也就是说通过这种方法可以解决H5新标签在老IE浏览器中的兼容问题。但是，另外一个问题，那么多的新标签，如果每个都要通过这种方法去生产的话，是不是太麻烦了呢？所以，我们现在介绍第二种方式，直接借用前辈大牛封装好的js库 --- html5shiv.jsHTML代码：<!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浏览器中也测试一下。
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
