HTML5新标签的兼容性处理

HTML5新的语义标签尽管有很多的好处,但是在低版本的老IE浏览器中还是存在兼容性问题的,常常让人感到头疼,到底是大胆的使用新标签还是使用传统的大量的DIV无义标签?今天就简单的看看H5新标签的兼容性处理方式。

10年积累的成都网站制作、成都网站设计、外贸营销网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有平远免费网站建设让你可以放心的选择与我们合作。

首先来看一小段简单的代码:

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新标签的兼容性处理
标题来源:https://www.cdcxhl.com/article48/pppeep.html

成都网站建设公司_创新互联,为您提供网站建设网页设计公司外贸网站建设企业网站制作商城网站域名注册

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都做网站