当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > IE6的BUG及修复 谓防患于未然的策略

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

HTML/XHTML教程 中的 IE6的BUG及修复 谓防患于未然的策略


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-20   浏览: 106 ::
收藏到网摘: n/a

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

在讨论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

<!DOCTYPE HTML>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



验证你的代码

我曾听说过有些人认为校验代码没有任何实用价值,但我不这么认为。校验仅仅只需花费一点点时间,而且将受益于所有浏览器而非仅仅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的用户。运用渐进增强策略,可以保证让那些用户至少使用到你网站(或网络应用)的基本功能。

更多渐进增强的资料

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

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

简单CSS Reset示例:

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

一些可供参考的CSS Resets

使用JavaScript框架

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

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

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

使用JavaScript模拟标准浏览器

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

如何在IE下调试页面

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