首页 / HTML5 / 详细介绍HTML5新标签的兼容性处理（图）

详细介绍HTML5新标签的兼容性处理（图）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详细介绍HTML5新标签的兼容性处理（图），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2511字，纯文字阅读大概需要4分钟。

内容图文

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

详细介绍HTML5新标签的兼容性处理（图） - 文章图片

IE6浏览器下：

详细介绍HTML5新标签的兼容性处理（图） - 文章图片

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

详细介绍HTML5新标签的兼容性处理（图） - 文章图片

红色的背景色可以显示出来了，说明通过document.createElement()这一方法是可行的，那为什么样式的宽高不起作用呢？因为添加的元素是内联元素，内联元素是没有宽高的，在了解这一点以后，我们再给案例中的header和footer添加一个"display: block;"属性，看看效果会有什么变化。

<style>
    header, footer{display: block; 
                   width:50px; height: 50px; 
                   background-color: #f00;}
</style>

IE6浏览器显示的效果：

详细介绍HTML5新标签的兼容性处理（图） - 文章图片

现在显示的效果跟我们需要的就完全一样了，也就是说通过这种方法可以解决H5新标签在老IE浏览器中的兼容问题。但是，另外一个问题，那么多的新标签，如果每个都要通过这种方法去生产的话，是不是太麻烦了呢？

所以，我们现在介绍第二种方式，直接借用前辈大牛封装好的js库 --- html5shiv.js

HTML代码：

<!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浏览器看效果：

详细介绍HTML5新标签的兼容性处理（图） - 文章图片

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

以上就是详细介绍HTML5新标签的兼容性处理（图）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的详细介绍HTML5新标签的兼容性处理（图）全部内容，希望文章能够帮你解决详细介绍HTML5新标签的兼容性处理（图）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/388265.html

来源：【匿名】