网站建设资讯

NEWS

网站建设资讯

HTML5新标签的兼容性处理-创新互联

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

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、虚拟空间、营销软件、网站建设、乌当网站维护、网站推广。

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

HTML代码:

         测试H5新标签兼容性      header footer

Google浏览器下:

HTML5新标签的兼容性处理

IE6浏览器下:

HTML5新标签的兼容性处理

很明显,header和footer在支持H5新标签的浏览器下已块级元素呈现,而在IE8及以下的浏览器中以文本呈现并且样式没有起作用,说明不被支持,那如何解决呢?

首先,第一种方法便是使用DOM操作来添加这些标签,既然浏览器不支持,那我自己来创建一个:

HTML代码:

         测试H5新标签兼容性           header footer

这时候,我们再来看看IE6浏览器显示的效果:

HTML5新标签的兼容性处理

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

IE6浏览器显示的效果:

HTML5新标签的兼容性处理

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

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

HTML代码:

         测试H5新标签兼容性      header footer

那我们现在直接打开IE6浏览器看效果:

HTML5新标签的兼容性处理

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

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:HTML5新标签的兼容性处理-创新互联
分享URL:http://cdweb.net/article/cseddh.html