首页 >web前端 >html教程 >IE6的BUG及修复 谓防患于未然的策略_HTML/Xhtml_网页制作

IE6的BUG及修复 谓防患于未然的策略_HTML/Xhtml_网页制作

PHP中文网
PHP中文网原创
2016-05-16 16:42:031332浏览

在讨论IE6的BUG及如何修复之前,有必要讲叙一些策略去避免这些恼人的问题——正所谓防患于未然 。

原文:Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
翻译:http://www.php.cn/(译文对原文进行了补充)

在讨论IE6BUG及如何修复之前,有必要讲叙一些策略去避免这些恼人的问题——正所谓防患于未然 。

IE6 市场占有率

据Market Share统计,目前(2009年8月)IE6 的市场占有率为25.25%,但是其他地方的统计明显要低,为18.1%;尽管统计结果不同,但都呈现出了下降的趋势(翻译此文时,淘宝的IE6用户已从70%跌破至69%)。但是最重要的,还是你自己网站的统计数据。如果你对你的网站进行了流量分析,那么IE6的占有率是否值得你去针对IE6进行开发?这需要你自己去权衡。

如果你网站绝大部分访问者不使用IE6并且不付费给你,那么你不必特意区针对IE6做兼容,从而节省时间、精力及资金。

做一个简洁的设计

在做设计的同时考虑代码的实现,可以避免一些布局上的问题。再复杂的设计稿也能用简洁的代码实现,如果你使用了过于繁冗的标签,那么你需要重新修缮设计稿。
如果你有丰富的开发经历,攻克过很多种布局难题,记录下你的解决方案,在以后碰到相同问题时可以提高开发效率。

使用合适的文档申明(doctype)

使用一个错误的文档声明会触发quirks mode(怪异模式),正确的文档声明可以保证你的页面在所有浏览器下保持一致的效果。使用其中的一个文档申明:HTML 5[/i], [i]HTML 4.01 Strict[/i], [i]HTML 4.01 Frameset[/i], [i]HTML 4.01 Transitional[/i], [i]XHTML 1.0 Strict[/i], [i]XHTML 1.0 Frameset[/i], [i]XHTML 1.0 Transitional[/i], or [i]XHTML 1.1

HTML 5

HTML 4.01 Strict

http://www.php.cn/">

HTML 4.01 Frameset

http://www.php.cn/">

HTML 4.01 Transitional

http://www.php.cn/">

XHTML 1.0 Strict

http://www.php.cn/">

XHTML 1.0 Frameset

http://www.php.cn/">

XHTML 1.0 Transitional

http://www.php.cn/">

XHTML 1.1

http://www.php.cn/">


验证你的代码

我曾听说过有些人认为校验代码没有任何实用价值,但我不这么认为。校验仅仅只需花费一点点时间,而且将受益于所有浏览器而非仅仅IE6;验证确保了向后兼容并且易于维护。至少也得验证XHTML!唯一可以忽略验证的情况是在你打算使用CSS3时。
你可以使用w3提供的工具 验证XHTML / 验证CSS

先对标准浏览器进行兼容

在写代码的过程中,一开始在标准浏览器中测试(如 Firefox, Opera, Chrome等),然后再去测试非标准浏览器(如IE6/IE7),因为这些标准浏览器都遵循w3c标准,大多的处理方式都相同。你可以分开来单独去兼容“特别”的IE浏览器,这样做能规范你的代码,你将会因此拥有扎实的基础;而且如果你不再需要兼容这些非标准浏览器,你可以一次性删除这些修复兼容性代码。

渐进增强(Progressive Enhancement)

渐进增强(Progressive Enhancement)是为了确保没有页面特效后基本功能也是可用的。简单来讲,渐进增强是指在确保页面在禁用JavaScript后能正常运作后,再对页面添加各种特效(JavaScript动画、Ajax异步等等)。我们同样可以运用“渐进增强”原则来使用CSS3(或者一些CSS2)、HTML5以及其他IE6所不支持的web规范。
某些情况下,是无法让所有用户在任何浏览器下都完全一模一样,特别是那些使用IE6的用户。运用渐进增强策略,可以保证让那些用户至少使用到你网站(或网络应用)的基本功能。

更多渐进增强的资料

  • 理解渐进增强(译文)

  • Understanding Progressive Enhancement

  • Progressive Enhancement With CSS

  • Progressive Enhancement: What It Is, And How To Use It?

  • Graceful Degradation vs. Progressive Enhancement

  • Pragmatic Progressive Enhancement - Why You Should Bother With It

使用自己的预设样式(CSS Reset)

每个浏览器都有各自不同的预设样式,在你的样式表之前使用预设样式(CSS Reset)可以避免在之后编写冗长的浏览器兼容样式。在网上有很多CSS Reset可供参考。

简单CSS Reset示例:

body,p,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,
th,td {margin:0;padding:0;}

一些可供参考的CSS Resets

  • YUI CSS Reset

  • Eric Meyer's Reset Reloaded

  • KISSY CSS Reset

使用JavaScript框架

如果你的网站使用了较多的JavaScript特效,建议使用JavaScript框架。大部分的js框架都兼容了包括IE6在内的各种浏览器。可选的框架有很多,但一般能用一种框架实现的效果一定可以用另外一种框架实现,所以你可以根据个人喜好来选择合适的框架。

以下是一些常用的JavaScript框架:

  • MooTools

  • jQuery

  • ProtoType with Scriptaculous

  • Dojo

  • Ext JS

强烈推荐实用MooTools,但如果你是入门者,还是建议使用jQuery。

使用JavaScript模拟标准浏览器

现在有一些JavaScript来使IE模拟标准浏览器,如果你有较高比例的用户使用IE6并且开启了JavaScript,可以考虑使用 Dean EdwardsIE7 或者类似的脚本。
译者注:不建议使用这些脚本,因为这些“模拟”的实现往往会消耗大量的资源,IE本来就够烂了。

如何在IE下调试页面

在IE下调试页面很麻烦,Firefox下的扩展程序 FirebugWeb Developer Toolbar 都是很好用的工具,如果你想在IE或其他浏览器上使用firebug,可以用Firebug Lite。
在IE下有两种最好的调试方法:IE CollectionIETester,并且都是免费的(虽然有一点点缺陷)。IETester的开发者也提供了 DebugBar 这款IE插件免费供个人使用,但商业用户只可试用60天。

 以上就是IE6的BUG及修复 谓防患于未然的策略_HTML/Xhtml_网页制作的内容,更多相关内容请关注PHP中文网(www.php.cn)!


声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn