我们也许无法改变互联网
但是我们正在改变建站

建站不再是一项技术工作
网站建设更多的是一次营销创作过程
腾佳科技建站永远践行的 就是运营至上
去洞穿时代人心 用最好的视觉与艺术感动心灵
我们的思想与品位凝结成每件卓越的作品
别人还在告诉你如何建一个网站
而我们却在解决如何运营你的网站
腾佳也许无法改变互联网
但是我们正在改变建站

百度千次,不如咨询一次
服务热线:400-089-6028
在线客服:QQ1379707606   QQ2061726764

郑州腾佳科技有限公司 www.zztengjia.com

地址:郑州市管城区郑汴路东明路交叉口恒泰国际B座2328

业务热线:0371-86095296  13938298430

大客户专线:13938277030 (手机/微信)

在线咨询

如何解决IE6/IE7/IE8浏览器不兼容HTML5

时间:04-07 来源:腾佳科技 作者:www.zztengjia.com 所属栏目:网站知识 点击:

如何解决IE6/IE7/IE8浏览器不兼容HTML5新标签的问题

HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML(标准通用标记语言下的一个应用)标准版本;现在仍处于发展阶段,但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点:首先,强化了Web网页的表现性能。其次,追加了本地数据库等Web应用的功能。

广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。

目前HTML5已向开发人员提供了很多新的标签,如section,nav,article,header和footer等。这些标签语义化程度高,会被经常使用,但在IE6,IE7,IE8和Firefox 2等老式浏览器中却不能识别和正常使用。

一、HTML5标签在浏览器展示存在的问题

对于现阶段来说,使用HTML5标签可能遇到的最大问题就是如何在不支持新标签的浏览器中做恰当的处理。当我们在页面中使用HTML5元素时,可能会得到三种不同的结果。

结果1:标签被当作错误处理并被忽略。那么DOM构建的时候,就会当作这个标签不存在。

结果2:标签会被当作错误处理,并在DOM构建的时候依然会按照预期的代码进行创建,并且HTML标签会被构造成行内元素(也就是说虽然不能识别,但是代码里section标签依然会在dom中创建一个对应section节点,但是属于行内元素)。

很多浏览器(比如Firefox 3.6和Safari4)解析的时候都会将div作为最外层的元素,然后div里面是一个识别不了的元素(section),它会在DOM中创建,并被作为一个行内元素存在。h1和p元素都是作为section元素的子节点。因为section在DOM中真实存在,所以也可以修改其样式。这种情况对应结果2。

IE9之前的版本会认为section标签是一个错误,并直接将其忽略,那么h1和p标签会被解析,然后成为div标签的子节点。</section>也会被认为是一个错误并直接跳过。在这些浏览器中实际有效的代码是这样的:

那么,旧版本的IE浏览器除了生成的DOM结构和其他浏览器不一样,其对不可识别标签的容错能力还是很棒的。因为section节点没有在DOM树中构建,所以也就不能给其增加样式。这种情况对应结果1。

当然,支持HTML5的浏览器比如IE9,Firefox4+,Safari5+会创建正确的DOM结构,然后这些标签会默认附带HTML5规范中定义的默认样式。

那么,我们所面临的最大问题就是同样的代码在不同的浏览器中形成了不同的DOM结构,并且含有不同的样式。

在我的研究中,我使用了多个页面,然后在这些页面上使用修改过后的bulletproof技术。我分别在简单和复杂的布局中,含有和不含有JavaScript交互进行测试。在每一个例子中,我只需要修改HTML就可以让页面表现正确(不修改JavaScript和CSS)。那么,子节点和父节点的问题怎么办?有趣的事情是我在测试中并没有遇到这样的问题。

理由很简单,因为我对代码苛刻的态度。我认真地做了第二遍检查:

(1)、标签名和ID不会用于应用样式(只是用class)。

(2)、尽量选择常用的CSS选择器并且尽量减少选择器的使用。

(3)、JavaScript代码不依赖于特定的DOM结构。

(4)、标签名不用于操作DOM。

我注意到另一个有趣的事情是我使用了HTML5元素作为容器。而这些新的元素仅仅是作为功能性模块的边界。你应该花费你的大部分时间为内部的元素编写样式和脚本而不是处理各个模块间的样式和脚本。由于马海祥博客的JavaScript和CSS标签都应用在容器的内部,所以一切都显得很顺利。我想这才是一个真正的代码质量高的网站。
文章来源:郑州制作公司哪家好 www.zztengjia.com

相关案例

LATEST CASE

最新资讯

建站咨讯

企业网站

公司形象

最新案例

设计知识

腾佳资讯

400电话办理

成功案例

· 400电话资费标准 [03月24日]
扫一扫,加微信
与建站老师一对一沟通

咨询总机:0371-86095296    24小时联系电话:13938277030 13938298430  

2061726764 1379707606    网站制作  网站建设  TAG标签  网站地图  

公司地址:郑州市管城区郑汴路东明路交叉口恒泰国际B座23楼2328室

2012-2016腾佳科技(郑州腾佳科技有限公司)版权所有 豫ICP备14002248号-2 友情连接申请qq:2061726764

400-089-6028