IE6终极备忘:修复IE6下 25+ Bugs
[译]IE6终极备忘:修复IE6下 25+ Bugs
2010年01月08日 | HTML/CSS, JavaScript去年就想将IE的bug系统地整理下,但一直都忙于工作、学习没有完成,看到这篇E文后,我毫不犹豫的放下了手中的工作将之翻译出来。
由于是第一次译文,所以错误在所难免,欢迎大家批评指正。
原文:Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
翻译:http://www.vfresh.org/w3c/727(译文对原文进行了补充)
转自:http://www.cnblogs.com/xcntime/articles/1797140.html
对IE6最好的策略就是不去兼容它。
好吧,我知道你的难处,你不得不去兼容IE6这个狗血的浏览器,因此不得不在兼容IE6上花费很多时间。对此,我颇有同感,来让我来帮助你吧。
我不会象许多文章那样让你去抵制IE6,这并不会帮助到你(迫不得已时)去兼容IE6;因为IE6依旧占有一定的市场份额,你无法放弃IE6。本文将帮助你来解决这个难题。
我查阅过很多资料来摘录这些解决方案(有些是我自己提供的),现在我做成手册提供给大家搞定IE6这个家伙。我尽可能的提供了最优解决方案而不是一些hacks,并且提供了一些相关的资料。如果你发现有更好的方法或者本文有错误,请联系我。
【目录】
〖策略〗
在讨论IE6的BUG及如何修复之前,有必要先讲一些策略去避免这些恼人的问题——正所谓防患于未然 。- IE6 市场占有率
- 做一个简洁的设计
- 使用合适的文档申明(doctype)
- 验证你的代码
- 先对标准浏览器进行兼容
- 渐进增强(Progressive Enhancement)
- 使用自己的预设样式(CSS Reset)
- 使用JavaScript框架
- 使用JavaScript模拟标准浏览器
- 如何在IE下调试页面
〖对IE6单独兼容〗
兼容IE6的第一步就是单独对IE进行兼容,你针对IE6所写的代码只影响IE6。- 使用IE特有条件注释
- 使用CSS选择器区分开IE6
- 使用JavaScript区分开IE6
〖图片〗
- PNG半透明图片
- IE6下的圆角
- 背景闪烁问题
〖布局〗
解决IE6布局方面的BUG非常的恼人!特别是在实现一个精美的设计稿时。- 理解 hasLayout
- IE6 盒模型
- 最小高度
- 最大高度
- 100% 高度
- 最小宽度
- 最大宽度
- 双边距Bug
- 清除浮动
- 浮动层错位
- 躲猫猫bug(The Guillotine Bug)
- 绝对定位元素的1像素间距bug
- 3像素间距bug
- IE下z-index的bug
- Overflow Bug
〖列表〗
- 横向列表宽度bug
- 列表阶梯bug
- 列表间隙bug
〖行为〗
ie6有着一些行为方面的BUG,究其原因是IE6版本太老了,不能完好地支持CSS2更不支持CSS3,而且微软固执的使用了其私有方法。- IE6中的:hover
- 在IE浏览其中使用
Canvas
标签 - IE6调整窗口大小的 Bug
〖JavaScript〗
IE6有着数不尽的JavaScript bug,这里我不会讲解每一个IE6下JavaScript的bug,只摘取其中几个普遍的问题来讨论。- 异常: Expected Identifier, String, Or Number
- IE中JavaScript内存泄露
〖其他〗
- 文本重复Bug
- 收藏夹图标
- IE6中GZip文件Bug
〖相关资源〗
〖策略〗
在讨论IE6的BUG及如何修复之前,有必要讲叙一些策略去避免这些恼人的问题——正所谓防患于未然 。目录 | 顶部
IE6 市场占有率
据Market Share统计,目前(2009年8月)IE6 的市场占有率为25.25%,但是其他地方的统计明显要低,为18.1%;尽管统计结果不同,但都呈现出了下降的趋势(翻译此文时,淘宝的IE6用户已从70%跌破至69%)。但是最重要的,还是你自己网站的统计数据。如果你对你的网站进行了流量分析,那么IE6的占有率是否值得你去针对IE6进行开发?这需要你自己去权衡。如果你网站绝大部分访问者不使用IE6并且不付费给你,那么你不必特意区针对IE6做兼容,从而节省时间、精力及资金。
目录 | 顶部
做一个简洁的设计
在做设计的同时考虑代码的实现,可以避免一些布局上的问题。再复杂的设计稿也能用简洁的代码实现,如果你使用了过于繁冗的标签,那么你需要重新修缮设计稿。如果你有丰富的开发经历,攻克过很多种布局难题,记录下你的解决方案,在以后碰到相同问题时可以提高开发效率。
目录 | 顶部
使用合适的文档申明(doctype)
使用一个错误的文档声明会触发quirks mode(怪异模式),正确的文档声明可以保证你的页面在所有浏览器下保持一致的效果。使用其中的一个文档申明:HTML 5
, HTML 4.01 Strict
, HTML 4.01 Frameset
, HTML 4.01 Transitional
, XHTML 1.0 Strict
, XHTML 1.0 Frameset
, XHTML 1.0 Transitional
, or XHTML 1.1
HTML 5
htmlHTML 4.01 Strict
htmlHTML 4.01 Frameset
htmlHTML 4.01 Transitional
htmlXHTML 1.0 Strict
htmlXHTML 1.0 Frameset
htmlXHTML 1.0 Transitional
htmlXHTML 1.1
html目录 | 顶部
验证你的代码
我曾听说过有些人认为校验代码没有任何实用价值,但我不这么认为。校验仅仅只需花费一点点时间,而且将受益于所有浏览器而非仅仅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示例:
cssbody,div,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
目录 | 顶部
使用JavaScript模拟标准浏览器
现在有一些JavaScript来使IE模拟标准浏览器,如果你有较高比例的用户使用IE6并且开启了JavaScript,可以考虑使用Dean Edwards的IE7或者类似的脚本。译者注:不建议使用这些脚本,因为这些“模拟”的实现往往会消耗大量的资源,IE本来就够烂了。
目录 | 顶部
如何在IE下调试页面
在IE下调试页面很麻烦,Firefox下的扩展程序Firebug和Web Developer Toolbar都是很好用的工具,如果你想在IE或其他浏览器上使用firebug,可以用Firebug Lite。在IE下有两种最好的调试方法:IE Collection和IETester,并且都是免费的(虽然有一点点缺陷)。IETester的开发者也提供了DebugBar这款IE插件免费供个人使用,但商业用户只可试用60天。
目录 | 顶部
〖对IE6单独兼容〗
兼容IE6的第一步就是单独对IE进行兼容,你针对IE6所写的代码只影响IE6;有几种方法可以区分开IE6:IE特有条件注释、CSS选择器、JavaScript,我们将逐一讨论。目录 | 顶部
使用IE特有条件注释
微软给IE添加了条件注释以区分不同版本,任何东西都可以塞进条件注释里:标签、JavaScript、js文件、css、内联样式。可以使用条件注释来针对某一个IE浏览器版本来编写代码。规则如下:(译注:可参考IE 特有注释(hack))
html
这段文字会在所有浏览器显示
这段文字会在所有浏览器显示
使用条件注释加载css的好处是这些样式是独立于其他css文件的,因此不会在编写兼容代码时弄得一团糟;而且当IE6的市场份额降低到不需要兼容时,可以快速的清理掉。
使用条件注释的唯一缺点是在IE浏览器下会增加额外的HTTP请求数,所以需要权衡是否这样做。但我不建议使用条件注释加载外部js文件,因为js文件会造成阻滞,在js未加载完之前其余文件都不会被加载;对于js请使用JavaScript程序来区分浏览器而非条件注释。
目录 | 顶部
使用CSS选择器区分开IE6
如果你不打算使用条件注释,CSS选择器是另外一个区分开IE6的办法,IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。示例:
html
Some Header Text Here
最新评论