IE6终极备忘修复IE6下 25+ Bugs.docx
- 文档编号:9013799
- 上传时间:2023-05-16
- 格式:DOCX
- 页数:32
- 大小:34.72KB
IE6终极备忘修复IE6下 25+ Bugs.docx
《IE6终极备忘修复IE6下 25+ Bugs.docx》由会员分享,可在线阅读,更多相关《IE6终极备忘修复IE6下 25+ Bugs.docx(32页珍藏版)》请在冰点文库上搜索。
IE6终极备忘修复IE6下25+Bugs
对IE6最好的策略就是不去兼容它。
好吧,我知道你的难处,你不得不去兼容IE6这个狗血的浏览器,因此不得不在兼容IE6上花费很多时间。
对此,我颇有同感,让我来帮助你吧。
我不会象许多文章那样让你去抵制IE6,这并不会帮助到你(迫不得已时)去兼容IE6;因为IE6依旧占有一定的市场份额,你无法放弃IE6。
本文将帮助你来解决这个难题。
我查阅过很多资料来摘录这些解决方案(有些是我自己提供的),现在我做成手册提供给大家搞定IE6这个家伙。
我尽可能的提供了最优解决方案而不是一些hacks,并且提供了一些相关的资料。
如果你发现有更好的方法或者本文有错误,请联系我。
【目录】
〖策略〗
在讨论IE6的BUG及如何修复之前,有必要先讲一些策略去避免这些恼人的问题——正所谓防患于未然。
IE6市场占有率
做一个简洁的设计
使用合适的文档申明(doctype)
验证你的代码
先对标准浏览器进行兼容
渐进增强(ProgressiveEnhancement)
使用自己的预设样式(CSSReset)
使用JavaScript框架
使用JavaScript模拟标准浏览器
如何在IE下调试页面
〖对IE6单独兼容〗
兼容IE6的第一步就是单独对IE进行兼容,你针对IE6所写的代码只影响IE6。
使用IE特有条件注释
使用CSS选择器区分开IE6
使用JavaScript区分开IE6
〖图片〗
PNG半透明图片
IE6下的圆角
背景闪烁问题
〖布局〗
解决IE6布局方面的BUG非常的恼人!
特别是在实现一个精美的设计稿时。
理解hasLayout
IE6盒模型
最小高度
最大高度
100%高度
最小宽度
最大宽度
双边距Bug
清除浮动
浮动层错位
躲猫猫bug(TheGuillotineBug)
绝对定位元素的1像素间距bug
3像素间距bug
IE下z-index的bug
OverflowBug
〖列表〗
横向列表宽度bug
列表阶梯bug
列表间隙bug
〖行为〗
ie6有着一些行为方面的BUG,究其原因是IE6版本太老了,不能完好地支持CSS2更不支持CSS3,而且微软固执的使用了其私有方法。
IE6中的:
hover
在IE浏览其中使用Canvas标签
IE6调整窗口大小的Bug
〖JavaScript〗
IE6有着数不尽的JavaScriptbug,这里我不会讲解每一个IE6下JavaScript的bug,只摘取其中几个普遍的问题来讨论。
异常:
ExpectedIdentifier,String,OrNumber
IE中JavaScript内存泄露
〖其他〗
文本重复Bug
收藏夹图标
IE6中GZip文件Bug
〖相关资源〗
〖策略〗
在讨论IE6的BUG及如何修复之前,有必要讲叙一些策略去避免这些恼人的问题——正所谓防患于未然。
目录|顶部
IE6市场占有率
据MarketShare统计,目前(2009年8月)IE6的市场占有率为25.25%,但是其他地方的统计明显要低,为18.1%;尽管统计结果不同,但都呈现出了下降的趋势(翻译此文时,淘宝的IE6用户已从70%跌破至69%)。
但是最重要的,还是你自己网站的统计数据。
如果你对你的网站进行了流量分析,那么IE6的占有率是否值得你去针对IE6进行开发?
这需要你自己去权衡。
如果你网站绝大部分访问者不使用IE6并且不付费给你,那么你不必特意区针对IE6做兼容,从而节省时间、精力及资金。
目录|顶部
做一个简洁的设计
在做设计的同时考虑代码的实现,可以避免一些布局上的问题。
再复杂的设计稿也能用简洁的代码实现,如果你使用了过于繁冗的标签,那么你需要重新修缮设计稿。
如果你有丰富的开发经历,攻克过很多种布局难题,记录下你的解决方案,在以后碰到相同问题时可以提高开发效率。
目录|顶部
使用合适的文档申明(doctype)
使用一个错误的文档声明会触发quirksmode(怪异模式),正确的文档声明可以保证你的页面在所有浏览器下保持一致的效果。
使用其中的一个文档申明:
HTML5,HTML4.01Strict,HTML4.01Frameset,HTML4.01Transitional,XHTML1.0Strict,XHTML1.0Frameset,XHTML1.0Transitional,orXHTML1.1
HTML5
html运行
DOCTYPEHTML>
HTML4.01Strict
html运行
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http:
//www.w3.org/TR/html4/strict.dtd">
HTML4.01Frameset
html运行
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Frameset//EN""http:
//www.w3.org/TR/html4/frameset.dtd">
HTML4.01Transitional
html运行
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
XHTML1.0Strict
html运行
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0Frameset
html运行
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML1.0Transitional
html运行
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML1.1
html运行
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:
//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
目录|顶部
验证你的代码
我曾听说过有些人认为校验代码没有任何实用价值,但我不这么认为。
校验仅仅只需花费一点点时间,而且将受益于所有浏览器而非仅仅IE6;验证确保了向后兼容并且易于维护。
至少也得验证XHTML!
唯一可以忽略验证的情况是在你打算使用CSS3时。
你可以使用w3提供的工具验证XHTML/验证CSS
目录|顶部
先对标准浏览器进行兼容
在写代码的过程中,一开始在标准浏览器中测试(如Firefox,Opera,Chrome等),然后再去测试非标准浏览器(如IE6/IE7),因为这些标准浏览器都遵循w3c标准,大多的处理方式都相同。
你可以分开来单独去兼容“特别”的IE浏览器,这样做能规范你的代码,你将会因此拥有扎实的基础;而且如果你不再需要兼容这些非标准浏览器,你可以一次性删除这些修复兼容性代码。
目录|顶部
渐进增强(ProgressiveEnhancement)
渐进增强(ProgressiveEnhancement)是为了确保没有页面特效后基本功能也是可用的。
简单来讲,渐进增强是指在确保页面在禁用JavaScript后能正常运作后,再对页面添加各种特效(JavaScript动画、Ajax异步等等)。
我们同样可以运用“渐进增强”原则来使用CSS3(或者一些CSS2)、HTML5以及其他IE6所不支持的web规范。
某些情况下,是无法让所有用户在任何浏览器下都完全一模一样,特别是那些使用IE6的用户。
运用渐进增强策略,可以保证让那些用户至少使用到你网站(或网络应用)的基本功能。
更多渐进增强的资料:
理解渐进增强(译文)
UnderstandingProgressiveEnhancement
ProgressiveEnhancementWithCSS
ProgressiveEnhancement:
WhatItIs,AndHowToUseIt?
GracefulDegradationvs.ProgressiveEnhancement
PragmaticProgressiveEnhancement–WhyYouShouldBotherWithIt
目录|顶部
使用自己的预设样式(CSSReset)
每个浏览器都有各自不同的预设样式,在你的样式表之前使用预设样式(CSSReset)可以避免在之后编写冗长的浏览器兼容样式。
在网上有很多CSSReset可供参考。
简单CSSReset示例:
css
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td{margin:
0;padding:
0;}
一些可供参考的CSSResets:
YUICSSReset
EricMeyer’sResetReloaded
KISSYCSSReset
目录|顶部
使用JavaScript框架
如果你的网站使用了较多的JavaScript特效,建议使用JavaScript框架。
大部分的js框架都兼容了包括IE6在内的各种浏览器。
可选的框架有很多,但一般能用一种框架实现的效果一定可以用另外一种框架实现,所以你可以根据个人喜好来选择合适的框架。
以下是一些常用的JavaScript框架:
MooTools
jQuery
ProtoTypewithScriptaculous
Dojo
ExtJS
强烈推荐实用MooTools,但如果你是入门者,还是建议使用jQuery。
目录|顶部
使用JavaScript模拟标准浏览器
现在有一些JavaScript来使IE模拟标准浏览器,如果你有较高比例的用户使用IE6并且开启了JavaScript,可以考虑使用DeanEdwards的IE7或者类似的脚本。
译者注:
不建议使用这些脚本,因为这些“模拟”的实现往往会消耗大量的资源,IE本来就够烂了。
目录|顶部
如何在IE下调试页面
在IE下调试页面很麻烦,Firefox下的扩展程序Firebug和WebDeveloperToolbar都是很好用的工具,如果你想在IE或其他浏览器上使用firebug,可以用FirebugLite。
在IE下有两种最好的调试方法:
IECollection和IETester,并且都是免费的(虽然有一点点缺陷)。
IETester的开发者也提供了DebugBar这款IE插件免费供个人使用,但商业用户只可试用60天。
目录|顶部
〖对IE6单独兼容〗
兼容IE6的第一步就是单独对IE进行兼容,你针对IE6所写的代码只影响IE6;有几种方法可以区分开IE6:
IE特有条件注释、CSS选择器、JavaScript,我们将逐一讨论。
目录|顶部
使用IE特有条件注释
微软给IE添加了条件注释以区分不同版本,任何东西都可以塞进条件注释里:
标签、JavaScript、js文件、css、内联样式。
可以使用条件注释来针对某一个IE浏览器版本来编写代码。
规则如下:
(译注:
可参考IE特有注释(hack))
html运行
这段文字会在所有浏览器显示
--[iflteIE6]>
这段文字仅显示在IE6及IE6以下版本。
ThismessagewillonlyappearinversionsofInternetExplorerlessthanorequaltoversion6.
[endif]-->
--[ifgteIE6]>
这段文字仅显示在IE6及IE6以上版本。
ThismessagewillonlyappearinversionsofInternetExplorergreaterthanorequaltoversion6.
[endif]-->
--[ifgtIE6]>
这段文字仅显示在IE6以上版本(不包含IE6)。
ThismessagewillonlyappearinversionsofInternetExplorergreaterthanversion6.
[endif]-->
--[ifIE5.5]>
这段文字仅显示在IE5.5。
ThismessagewillonlyappearinInternetExplorer5.5.
[endif]-->
--在IE6及IE6以下版本中加载css-->
--[iflteIE6]>
[endif]-->
这段文字会在所有浏览器显示
使用条件注释加载css的好处是这些样式是独立于其他css文件的,因此不会在编写兼容代码时弄得一团糟;而且当IE6的市场份额降低到不需要兼容时,可以快速的清理掉。
使用条件注释的唯一缺点是在IE浏览器下会增加额外的HTTP请求数,所以需要权衡是否这样做。
但我不建议使用条件注释加载外部js文件,因为js文件会造成阻滞,在js未加载完之前其余文件都不会被加载;对于js请使用JavaScript程序来区分浏览器而非条件注释。
目录|顶部
使用CSS选择器区分开IE6
如果你不打算使用条件注释,CSS选择器是另外一个区分开IE6的办法,IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。
示例:
html运行
/*IE6专用*/
.content{color:
red;}
/*其他浏览器*/
div>p.content{color:
blue;}
这个方法的缺点是容易把样式表弄得一团糟,所以一定要写好注释说明。
在示例中,针对IE6写的样式在其他浏览器中也会执行,但(标准浏览器中)之后的子选择器覆盖了之前的申明,而IE6不支持子选择器所以忽略了它。
扩展阅读:
CSSBrowserCompatibilityChart
MasterBrowserCompatibilityChart
目录|顶部
使用JavaScript区分开IE6
如果你想要使用JavaScript区分开IE6,请看示例:
javascript
//原生JavaScript
if(typeofdocument.body.style.maxHeight==="undefined"){
alert('IE6Detected');
}
//MooTools(框架)
if(Browser.Engine.trident4){
alert('IE6Detected');
}
//jQuery(框架)
if(($.browser.msie)&&($.browser.version=="6.0")){
alert('IE6Detected');
}
扩展阅读:
Quirksmode’sBrowserObject
MooTools’BrowserObject
jQuery’ssupportutility
目录|顶部
〖图片〗
目录|顶部
PNG半透明图片
有很多JavaScript解决方案来修复IE6使用PNG-24图片,但除了TwinHelix’sIE5.5+PNGAlphaFix都不支持CSSsprites。
另外一个办法是使用IE特有的滤镜,可阅读AaronBaxter的博客。
或译者的《ie5+PNGFix》
JavaScript方式修复IE6PNG
MooTools’FixPNG
jQueryPNGfix
IEPNGFixbyTwinHelix
TweakPNG
DD_belatedPNG
目录|顶部
IE6下的圆角
可以详细阅读CSS圆角菜单。
目录|顶部
背景闪烁问题
如果你给链接、按钮用CSSsprites作为背景,你可能会发现在IE6下会有背景图闪烁的现象。
造成这个的原因是由于IE6没有将背景图缓存,每次触发hover的时候都会重新加载,可以用JavaScript设置IE6缓存这些图片:
javascript
document.execCommand("BackgroundImageCache",false,true);
其他解决方法:
MinimizeFlickeringCSSBackgroundImagesinIE6
目录|顶部
〖布局〗
解决IE6布局方面的BUG非常的恼人!
特别是在实现一个精美的设计稿时。
目录|顶部
理解hasLayout
许多IE6下的Bug及渲染问题都可以归于微软的私有概念hasLayout。
简要的说,在给元素定义具体的尺寸(如height或width)就会触发hasLayout,在IE6下缺失或触发hasLayout会导致一些bug。
扩展阅读:
《Onhavinglayout》(译文)
“HasLayout”OverviewfromMicrosoft
hasLayoutCSSBugs
IE6盒模型
如果怪异模式(quirksmode)在IE6中启用,IE6将会使用微软旧版的盒模型:
width是元素的实际宽度,内容宽度=width–(margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width)。
最好的办法是申明正确的文档类型以避免触发怪异模式,或者避免给有border或padding的元素定义width属性。
当然你也可以考虑使用条件注释。
扩展阅读:
IECSSTricksThatWillGetYouEveryTime
InternetExplorerAndTheCSSBoxModel
InternetExplorerBoxModelBug
目录|顶部
最小高度
IE6不支持min-height属性,但它却认为height就是最小高度。
感谢DustinDiaz提供了一个很好的方法:
使用!
important,ie6会忽视它但其余浏览器不会。
注:
IE6在同一个声明语句中(即一个综括号{})的属性定义,后面的总是会覆盖前面的,所以下例中后面的height覆盖掉了前面定义的importantheight
css
/*所有浏览器*/
#container{min-height:
200px;height:
auto!
important;height:
200px;}
另一个方法是使用CSS选择器:
css
/*仅IE6*/
#container{min-height:
200px;height:
200px;}
/*其他浏览器*/
html>body#container{height:
auto;}
目录|顶部
最大高度
非常遗憾,在IE6下实现max-height只能使用IE特有滤镜,或者可以使用JavaScript实现。
我个人更建议使用JavaScript来解决,因为IE滤镜会消耗大量资源甚至会使浏览器崩溃,而且禁用JavaScript后这两种方法都无法生效。
JavaScript
javascript
//直接使用ID来改变元素的最大高度
varcontainer=document.getElementById('container');
container.style.height=(container.scrollHeight>199)?
"200px":
"auto";
//写成函数来运行
functionsetMaxHeight(elementId,height){
varcontainer=document.getElementById(elementId);
container.style.height=(container.scrollHeight>(height-1))?
height+"px":
"auto";
}
//函数示例
setMaxHeight('container1',200);
setMaxHeight('container2',500);
目录|顶部
100%高度
在IE6下,如果要给元素定义100%高度,必须要明确定义它的父级元素的高度,如果你需要给元素定义满屏的高度,就得先给html和body定义height:
100%;。
css
/*给child元素定义100%高度(IE6)*/
#parent{height:
500px;}
#child{height:
100%;}
/*定义满屏高度(IE6)*/
html,body{height:
100%;}
#fullLength{height:
100%;}
目录|顶部
最小宽度
同max-height和max-width一样,IE6也不支持min-width。
有2个方法实现最小宽度,使用额外的标签、使用JavaScript。
javascript
//直接使用ID来改变元素的最小宽度
varcontainer=document.getElementById('container');
container.style.width=(container.clientWidth "500px": "auto"; //写成函数来运行 functionsetMinWidth(elementId,width){ varcontainer=document.getElemen
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- IE6终极备忘修复IE6下 25+ Bugs IE6 终极 备忘 修复 25