`
guoyiqi
  • 浏览: 1009825 次
社区版块
存档分类
最新评论

IE6终极备忘:修复IE6下 25+ Bugs(转自:http://www.cnblogs.com/aiyuchen/archive/2011/05/11/2043844.html)

 
阅读更多

去年就想将IE的bug系统地整理下,但一直都很忙没有完成,看到这篇E文后,我毫不犹豫的放下了手中的工作将之翻译出来。
由于是第一次译文,所以错误在所难免,欢迎大家批评指正。

原文:Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

翻译:http://www.lizhenwen.com/w3c/727(译文对原文进行了补充)

对IE6最好的策略就是不去兼容它。

好吧,我知道你的难处,你不得不去兼容IE6这个狗血的浏览器,因此不得不在兼容IE6上花费很多时间。对此,我颇有同感,让我来帮助你吧。

我不会象许多文章那样让你去抵制IE6,这并不会帮助到你(迫不得已时)去兼容IE6;因为IE6依旧占有一定的市场份额,你无法放弃IE6。本文将帮助你来解决这个难题。

我查阅过很多资料来摘录这些解决方案(有些是我自己提供的),现在我做成手册提供给大家搞定IE6这个家伙。我尽可能的提供了最优解决方案而不是一些hacks,并且提供了一些相关的资料。如果你发现有更好的方法或者本文有错误,请联系我。

【目录】

〖策略〗

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

〖对IE6单独兼容〗

兼容IE6的第一步就是单独对IE进行兼容,你针对IE6所写的代码只影响IE6。

〖图片〗

〖布局〗

解决IE6布局方面的BUG非常的恼人!特别是在实现一个精美的设计稿时。

〖列表〗

〖行为〗

ie6有着一些行为方面的BUG,究其原因是IE6版本太老了,不能完好地支持CSS2更不支持CSS3,而且微软固执的使用了其私有方法。

〖JavaScript〗

IE6有着数不尽的JavaScript bug,这里我不会讲解每一个IE6下JavaScript的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, orXHTML 1.1

HTML 5

html
<!DOCTYPE HTML>

HTML 4.01 Strict

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

HTML 4.01 Frameset

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

HTML 4.01 Transitional

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

XHTML 1.0 Strict

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

XHTML 1.0 Frameset

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

XHTML 1.0 Transitional

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

XHTML 1.1

html
<!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示例:

css
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或者类似的脚本。

译者注:不建议使用这些脚本,因为这些“模拟”的实现往往会消耗大量的资源,IE本来就够烂了。

目录|顶部

如何在IE下调试页面

在IE下调试页面很麻烦,Firefox下的扩展程序FirebugWeb Developer Toolbar都是很好用的工具,如果你想在IE或其他浏览器上使用firebug,可以用Firebug Lite

在IE下有两种最好的调试方法:IE CollectionIETester,并且都是免费的(虽然有一点点缺陷)。IETester的开发者也提供了DebugBar这款IE插件免费供个人使用,但商业用户只可试用60天。

目录|顶部

〖对IE6单独兼容〗

兼容IE6的第一步就是单独对IE进行兼容,你针对IE6所写的代码只影响IE6;有几种方法可以区分开IE6:IE特有条件注释、CSS选择器、JavaScript,我们将逐一讨论。

目录|顶部

使用IE特有条件注释

微软给IE添加了条件注释以区分不同版本,任何东西都可以塞进条件注释里:标签、JavaScript、js文件、css、内联样式。可以使用条件注释来针对某一个IE浏览器版本来编写代码。

规则如下:(译注:可参考IE 特有注释(hack)

html
<p>这段文字会在所有浏览器显示</p> 
<!--[if lte IE 6]> 
<p>这段文字仅显示在 IE6及IE6以下版本。</p> 
<p>This message will only appear in versions of Internet Explorer less than or equal to version 6.</p> 
<![endif]--> 

<!--[if gte IE 6]> 
<p>这段文字仅显示在 IE6及IE6以上版本。</p> 
<p>This message will only appear in versions of Internet Explorer greater than or equal to version 6.</p> 
<![endif]--> 

<!--[if gt IE 6]> 
<p>这段文字仅显示在 IE6以上版本(不包含IE6)。</p> 
<p>This message will only appear in versions of Internet Explorer greater than version 6.</p> 
<![endif]--> 

<!--[if IE 5.5]> 
<p>这段文字仅显示在 IE5.5。</p> 
<p>This message will only appear in Internet Explorer 5.5.</p> 
<![endif]--> 

<!--在 IE6及IE6以下版本中加载css--> 
<!--[if lte IE 6]> 
<link type="text/css" rel="stylesheet" href="css/ie6.css" /> 
<![endif]--> 

<p>这段文字会在所有浏览器显示</p>

使用条件注释加载css的好处是这些样式是独立于其他css文件的,因此不会在编写兼容代码时弄得一团糟;而且当IE6的市场份额降低到不需要兼容时,可以快速的清理掉。

使用条件注释的唯一缺点是在IE浏览器下会增加额外的HTTP请求数,所以需要权衡是否这样做。但我不建议使用条件注释加载外部js文件,因为js文件会造成阻滞,在js未加载完之前其余文件都不会被加载;对于js请使用JavaScript程序来区分浏览器而非条件注释。

目录|顶部

使用CSS选择器区分开IE6

如果你不打算使用条件注释,CSS选择器是另外一个区分开IE6的办法,IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。

示例:

html
<style type="text/css" > 
/* IE6 专用 */
.content {color:red;}
/* 其他浏览器 */
div>p .content {color:blue;}
</style> 
<div> 
	<p class="header">Some Header Text Here</p> 
</div>

这个方法的缺点是容易把样式表弄得一团糟,所以一定要写好注释说明。

在示例中,针对IE6写的样式在其他浏览器中也会执行,但(标准浏览器中)之后的子选择器覆盖了之前的申明,而IE6不支持子选择器所以忽略了它。

扩展阅读:

目录|顶部

使用JavaScript区分开IE6

如果你想要使用JavaScript区分开IE6,请看示例:

javascript
//原生JavaScript 
if(typeof document.body.style.maxHeight === "undefined") { 
	alert('IE6 Detected');
} 

//MooTools(框架) 
if (Browser.Engine.trident4) { 
	alert('IE6 Detected');
} 

//jQuery(框架) 
if (($.browser.msie) &amp;&amp; ($.browser.version == "6.0")){ 
	alert('IE6 Detected');
}

扩展阅读:

目录|顶部

〖图片〗

目录|顶部

PNG半透明图片

有很多JavaScript解决方案来修复IE6使用PNG-24图片,但除了Twin Helix’s IE5.5+ PNG Alpha Fix都不支持CSS sprites。

另外一个办法是使用IE特有的滤镜,可阅读Aaron Baxter的博客或译者的《ie5+ PNG Fix》

JavaScript方式修复IE6 PNG

目录|顶部

IE6下的圆角

可以详细阅读CSS 圆角菜单

目录|顶部

背景闪烁问题

如果你给链接、按钮用CSS sprites作为背景,你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存,每次触发hover的时候都会重新加载,可以用JavaScript设置IE6缓存这些图片:

javascript
	document.execCommand("BackgroundImageCache",false,true);

其他解决方法:

目录|顶部

〖布局〗

解决IE6布局方面的BUG非常的恼人!特别是在实现一个精美的设计稿时。

目录|顶部

理解 hasLayout

许多IE6下的Bug及渲染问题都可以归于微软的私有概念hasLayout。简要的说,在给元素定义具体的尺寸(如heightwidth)就会触发hasLayout,在IE6下缺失或触发hasLayout会导致一些bug。

扩展阅读:

IE6 盒模型

如果怪异模式(quirks mode)在IE6中启用,IE6将会使用微软旧版的盒模型:width是元素的实际宽度,内容宽度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)。最好的办法是申明正确的文档类型以避免触发怪异模式,或者避免给有borderpadding的元素定义width属性。当然你也可以考虑使用条件注释。

扩展阅读:

目录|顶部

最小高度

IE6 不支持min-height属性,但它却认为height就是最小高度。感谢Dustin Diaz提供了一个很好的方法:使用!important,ie6会忽视它但其余浏览器不会。

注:IE6在同一个声明语句中(即一个综括号{})的属性定义,后面的总是会覆盖前面的,所以下例中后面的height覆盖掉了前面定义的important height

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来改变元素的最大高度 
var container = document.getElementById('container');
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";

//写成函数来运行 
function setMaxHeight(elementId, height){ 
	var container = document.getElementById(elementId);
	container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
} 

//函数示例 
setMaxHeight('container1', 200);
setMaxHeight('container2', 500);

目录|顶部

100% 高度

在IE6下,如果要给元素定义100%高度,必须要明确定义它的父级元素的高度,如果你需要给元素定义满屏的高度,就得先给htmlbody定义height:100%;

css
/* 给child元素定义100%高度(IE6)*/ 
#parent {height:500px;} 
#child {height:100%;} 

/* 定义满屏高度(IE6)*/ 
html, body {height:100%;} 
#fullLength {height:100%;}

目录|顶部

最小宽度

max-heightmax-width一样,IE6也不支持min-width。有2个方法实现最小宽度,使用额外的标签、使用JavaScript。

javascript
//直接使用ID来改变元素的最小宽度 
var container = document.getElementById('container');
container.style.width = (container.clientWidth < width) ? "500px" : "auto";

//写成函数来运行 
function setMinWidth(elementId, width){ 
	var container = document.getElementById(elementId);
	container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
} 

//函数示例 
setMinWidth('container1', 200);
setMinWidth('container2', 500);

目录|顶部

最大宽度

只能使用JavaScript。

javascript
//直接使用ID来改变元素的最大宽度 
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

//写成函数来运行 
function setMaxWidth(elementId, width){ 
	var container = document.getElementById(elementId);
	container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
} 

//函数示例 
setMaxWidth('container1', 200);
setMaxWidth('container2', 500);

目录|顶部

双边距Bug

当元素浮动时,IE6会错误的把浮动方向的margin值双倍计算。Steve Clason给出了解决方法:给元素添加display:inline;

css
/*IE6下将产生双倍边距*/ 
.floatedEl {float:left; margin-left:100px;} 

/*修正*/ 
.floatedEl {float:left; margin-left:100px; display:inline;}

目录|顶部

清除浮动

如果你想用div(或其他容器)包裹一个浮动的元素,你会发现必须给div(容器)定义明确的heightwidthoverflow之中一个属性(除了auto值)才能将浮动元素严实地包裹。

示例:

html
<div id="container"> 
<div id="floated1"></div> 
<div id="floated2"></div> 
</div>
css
#container {border:1px solid #333; overflow:auto; height:100%;} 
#floated1 {float:left; height:300px; width:200px; background:#00F;} 
#floated2 {float:right; height:400px; width:200px; background:#F0F;}

译者常用的方式:

css
#container {zoom:1;} /* ie浏览器 */ 
#container:after{content:"/0020";display:block;height:0;clear:both;} /*标准浏览器*/

扩展阅读:

目录|顶部

浮动层错位

当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。

浮动层错位问题在IE6下没有真正让人满意的解决方法,虽然可以使用overflow:hidden;overflow:scroll;来修正,但hidden容易导致其他一些问题,scroll会破坏设计;JavaScript也没法很好地解决这个问题。所以我的建议是一定要避免这个问题发生,使用一个固定的布局或者控制好内容的宽度。

扩展阅读

目录|顶部

躲猫猫bug

在IE6和IE7下,躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素,如果在他之后有不浮动的内容,并且有一些定义了:hover的链接,当鼠标移到那些链接上时,在IE6下就会触发躲猫猫。

点此查看bug示例页

头大了吧!但别担心,well-documented提供了详细的解决方法。

不管为何会触发这个问题,解决方法很简单:

  1. 在(那个未浮动的)内容之后添加一个<span style="clear:both;"></span>
  2. 触发包含了这些链接的容器的hasLayout,一个简单的方法就是给其定义height:1%;

扩展阅读:

目录|顶部

绝对定位元素的1像素间距bug

IE6下的这个错误是由于进位处理误差造成(IE7已修复),当绝对定位元素的父元素高或宽为奇数时,bottomright会产生错误。唯一的解决办法就是给父元素定义明确的高宽值,但对于液态布局没有完美的解决方法。Paul O’Brien有关这个bug有一篇文章来讲解

扩展阅读:

目录|顶部

3像素间距bug

在IE6中,当文本(或无浮动元素)跟在一个浮动的元素之后,文本和这个浮动元素之间会多出3像素的间隔,Stu Nichols有一个非常好的解决方法

译注:可运行下面代码来查看作者提供的修复方法

html
<style type="text/css"> 
.container {width:750px; height:237px; margin:50px auto; background:url(http://www.cssplay.co.uk/ie/3pxbug/bug.jpg) no-repeat center top;}
.container #page1,.container #page2 {width:30%; margin:0 auto 0 auto; padding-top:80px;}

.container .topMid {overflow:hidden; height:15px; background: url(http://www.cssplay.co.uk/ie/3pxbug/topmid.png);}
.container .topLeft {overflow:hidden; width:20px; height:15px; float:left; background:url(http://www.cssplay.co.uk/ie/3pxbug/topleft.png);}
.container .topRight {overflow:hidden; width:25px; height:15px; float:right; background:url(http://www.cssplay.co.uk/ie/3pxbug/topright.png);}

.container .content {height:100px; margin-right:25px; background:#ccc;}
.container .content h2 {font-size:20px; height:80px; line-height:70px; text-align:center; margin:0;}
.container .midLeft {width:20px; height:100px; float:left; background: url(http://www.cssplay.co.uk/ie/3pxbug/midleft.png);}
.container .midRight {width:25px; height:100px; float:right; background: url(http://www.cssplay.co.uk/ie/3pxbug/midright.png);}


.container .bottomMid {overflow:hidden; height:20px; background: url(http://www.cssplay.co.uk/ie/3pxbug/bottommid.png);}
.container .bottomLeft {overflow:hidden; width:20px; height:20px; float:left; background:url(http://www.cssplay.co.uk/ie/3pxbug/bottomleft.png);}
.container .bottomRight {overflow:hidden; width:25px; height:20px; float:right; background:url(http://www.cssplay.co.uk/ie/3pxbug/bottomright.png);}

/* 给浮动层添加 display:inline 和 -3px 负值margin  */

.container #page2 .topLeft,
.container #page2 .midLeft,
.container #page2 .bottomLeft {display:inline;margin-right:-3px;}
.container #page2 .topRight,
.container #page2 .midRight,
.container #page2 .bottomRight {display:inline;margin-left:-3px;}

/*  给中间的内容层定义 margin-right 以纠正-3px */

* html #page2 .content {margin-right:22px;}
</style> 
<div class="container"> 
	<div id="page1"> 
		<div class="topLeft"></div> 
		<div class="topRight"></div> 
		<div class="topMid"></div> 
		<div class="midLeft"></div> 
		<div class="midRight"></div> 
		<div class="content"> 
			<h2>〖3px Bug〗</h2> 
		</div> 
		<div class="bottomLeft"></div> 
		<div class="bottomRight"></div> 
		<div class="bottomMid"></div> 
	</div> 
</div> 

<div class="container"> 
	<div id="page2"> 
		<div class="topLeft"></div> 
		<div class="topRight"></div> 
		<div class="topMid"></div> 
		<div class="midLeft"></div> 
		<div class="midRight"></div> 
		<div class="content"> 
			<h2>〖3px Bug 已修正!〗</h2> 
		</div> 
		<div class="bottomLeft"></div> 
		<div class="bottomRight"></div> 
		<div class="bottomMid"></div> 
	</div> 
</div>

目录|顶部

IE下z-index的bug

在IE浏览器中,定位元素的z-index层级是相对于各自的父级容器,所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index,有些情况下还需要定义position:relative

扩展阅读:

目录|顶部

Overflow Bug

在IE6/7中,overflow无法正确的隐藏有相对定位position:relative;的子元素,如下例:

html
<style type="text/css" > 
.wrap {overflow:hidden;width:100px;height:100px;background:#336600;border:solid #666600 5px;}
.child {position:relative;width:50px;height:200px;background:#99CC00;}
</style> 
<div class="wrap"> 
	<div class="child"> 
	</div> 
</div>

解决方法就是给外包容器.wrap加上position:relative;

目录|顶部

〖列表问题〗

最为特别的IE许多bug都会影响到列表,这里例举了一些示例。

目录|顶部

横向列表宽度bug

如果你使用float:left;<li>横向摆列,并且<li>内包含的<a>(或其他)触发了hasLayout,在IE6下就会有错误的表现:

html
<style type="text/css" > 
#menu li {
	float:left;
	list-style:none;
	background:#CCCCFF;
}
#menu li a {
	padding:0 10px;
	display:block;
	height:20px;	/* 触发了hasLayout */
}
</style> 
<ul id="menu"> 
	<li><a href="#" title="">Menu Item #1</a></li> 
	<li><a href="#" title="">Menu Item #2</a></li> 
	<li><a href="#" title="">Menu Item #3</a></li> 
</ul>

解决方法很简单,只需要给<a>定义同样的float:left;即可。

目录|顶部

列表阶梯bug

bug示例:

html
<style type="text/css" > 
ul {
    clear: both;
    list-style: none;
}
a {
    display: block;
    float: left;
    background: #99CCFF;
}
#two a {
    font-size: 1.1em;
}
</style> 
<ul> 
	<li><a href="#">One</a></li> 
	<li><a href="#">Two</a></li> 
	<li><a href="#">Three</a></li> 
</ul> 
<ul id="two"> 
	<li><a href="#">One</a></li> 
	<li><a href="#">Two</a></li> 
	<li><a href="#">Three</a></li> 
</ul>

列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发,我们本意是要做一个横向的列表(通常是导航栏),但IE却可能呈现出垂直的或者阶梯状。

解决办法就是给<li>定义float:left;而非子元素<a>,或者给<li>定义display:inline;也可以解决。

目录|顶部

垂直列表间隙bug

当我们使用<li>包含一个块级子元素时,IE6(IE7也有可能)会错误地给每条列表元素(<li>)之间添加空隙;解决这个问题的方法有很多,看示例:

BUG代码:

html
<style type="text/css" > 
ul {margin:0; padding:0; list-style:none;}
li a {display:block; background:#ddd;}
</style> 
<ul> 
	<li><a href="#">Item 1</a></li> 
	<li><a href="#">Item 2</a></li> 
	<li><a href="#">Item 3</a></li> 
</ul>

解决方法:

Jon Hicks<a>flaot并且清除float来解决这个问题:

css
ul {margin:0; padding:0; list-style:none;} 
li a {display:block; padding:0.5em; background:#ddd; float:left; clear:left;}

另外一个办法就是触发<a>hasLayout(如定义高宽、使用zoom:1;

css
ul {margin:0; padding:0; list-style:none;} 
li a {display:block; padding:0.5em; background:#ddd; zoom:1;} 
/* height:1%; 也有同样的作用 */

也可以给<li>定义display:inline;来解决此问题。

另外还有一个极有趣的方法,给<a>包含的文本末尾添加一个空格:

html
<ul> 
	<li><a href="#">Item 1 </a></li> 
	<li><a href="#">Item 2 </a></li> 
	<li><a href="#">Item 3 </a></li> 
</ul>

扩展阅读:

目录|顶部

〖行为〗

ie6有着一些行为方面的BUG,究其原因是IE6版本太老了,不能完好地支持CSS2更不支持CSS3,而且微软固执的使用了其私有方法。

目录|顶部

IE6中的:hover

在IE6中,除了<a>(需要有href属性)才能触发:hover行为,这妨碍了我们实现许多鼠标触碰效果,但还是有一些法子是可以解决它的。

最好是不要用:hover来实现重要的功能,仅仅只用它来强化效果。

许多修复IE6 hover的方法都是使用微软提供的私有方法behavior或者JavaScript,通常使用JavaScript框架或者IE6修复类js。

目录|顶部

在IE浏览其中使用Canvas标签

canvas是HTML5新引入的元素,提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。

所有IE浏览器都不支持HTML5中的canvas标签,而是使用它微软私有的VML,但是可以通过JavaScript来使canvas在IE下生效。

修复canvas的一些JavaScript:

目录|顶部

IE6调整窗口大小的 Bug

当把body居中放置,改变IE浏览器大小的时候,任何在body里面的相对定位元素都会固定不动了。Emil Stenström发现了IE6 Resize Bug并提供了解决办法:给body定义position:relative;就行了,够简单吧!~

目录|顶部

〖JavaScript〗

IE6有着数不尽的JavaScript bug,这里我不会讲解每一个IE6下JavaScript的bug,只摘取其中几个普遍的问题来讨论。

目录|顶部

Error: Expected Identifier, String, Or Number

IE浏览器不容许不良的JavaScript书写,如果在数组或者Hash对象的末尾有逗号就会引发异常“Expected Identifier, String, Or Number”,其他浏览器允许这样做,但在书写时注意删除末尾的逗号以避免这个错误。

目录|顶部

IE中JavaScript内存泄露

由于IE浏览器使用其自己的内存管理,当JavaScript使用的内存没有被回收时就会引发内存泄露。可阅读《JScript的内存泄漏》《Finally, the alternative fix for IE6’s memory leak is available》

目录|顶部

〖其他〗

IE6中一些其他bug

目录|顶部

文本重复Bug

在IE6中,一些隐藏的元素(如注释、display:none;的元素)被包含在一个浮动元素里,就有可能引发文本重复bug:

html
<style type="text/css" > 
.demobox {
	width: 250px;
	border: 3px solid #4c6f42;
}
.firstfloat {
	float: left;
	background: #939a90;
}
.secondfloat {
	float: left;
	width: 250px;
	margin-bottom: 2px;
	background: #fbdabb;
}
</style> 
<!-- Begin live demo --> 
<div class="demobox"> 
	<div class="firstfloat">第一个浮动层</div> 
	<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> 
	<div class="secondfloat"> 
		第二个浮动层<br /> 
		<span style="background: #f2ab82;">aa这段文字会被重复。。。这段文字会被重复。。。这段文字会被重复。。。这段文字会被重复。。。这段文字会被重复。。。</span> 
	</div> 
	<div style="clear: both; background: #b2d4af;">清除浮动层</div> 
</div> 
<!-- end live demo -->

Position Is Everything详细讲解了这个问题,但解决办法很简单:给浮动元素添加display:inline;

css
.firstfloat {display:inline;}

目录|顶部

IE的收藏夹图标(Favicons)

收藏夹图标会以16×16像素大小显示在你的收藏夹里,有两种方法来显示收藏夹图标:

  1. 把一张图片命名为favicon.ico并放置在网站的根目录,IE及其他浏览区都会自动设置该文件为收藏夹图标;
  2. <head>区域声明:
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />

需要注意的是收藏夹图标会被一直缓存,除非你清除浏览器的缓存,才会更新新的图标;如果你想要浏览者自动更新收藏夹图标,请给favicon.ico设置expires。

扩展阅读:

目录|顶部

IE6的GZip

服务器端使用GZip压缩了的文件,在某些版本的IE6(特别是未更新XP sp2的)中会有一些问题。所幸的是Seb Duggan找到了IE6 GZip bug解决方法,在Apache中使用ISAPI_Rewrite

Seb提供的方法是在 ISAPI_Rewrite 安装目录下的httpd.conf中加入以下代码:

html
RewriteEngine on

RewriteCond %{HTTP:User-Agent} MSIE [56]
RewriteCond %{HTTP:User-Agent} !SV1
RewriteCond %{REQUEST_URI} .(css|js)$
RewriteHeader Accept-Encoding: .* $1

分享到:
评论

相关推荐

    InsightSphinxExamples-5.0.0.zip

    $ ./Utilities/SetupForDevelopment.sh .. _Breathe: https://github.com/michaeljones/breathe .. _build instructions in the documentation: https://itk.org/ITKExamples/Documentation/Build/index.html .. _...

    libemgucv-windesktop-4.2.0.3662.zip

    开源的资源,就当分流,还收什么积分 Version 4.2.0.3662 ================================================================== For online documentation please visit ...http://www.emgu.com/bugs/

    EurekaLog_7.5.0.0_Enterprise

    2)....Important: File layout was changed for BDS 2006+. Delphi and C++ Builder files are now located in StudioNum folders instead of old DelphiNum and CBuilderNum folders. Update your search paths if ...

    DVD转换到AVI的源代码

    6. revised I/O routine (getbit.c getbic.h) 7. MMX-optimized motion compensation (recon.c getpic.c) 8. MMX-optimized color space conversion (store.c) 9. audio normalization (norm.c) - The author ...

    libxml2-2.9.1.tar.gz

    ./configure ; make ; make install To build on Windows: see instructions on win32/Readme.txt To assert build quality: on an Unixised setup: run make tests otherwise: There is 3 standalone tools ...

    linux libxml2-2.6.26

    ./configure ; make ; make install To build on Windows: see instructions on win32/Readme.txt To assert build quality: on an Unixised setup: run make tests otherwise: There is 3 standalone tools ...

    X-CART GOLD v3.4.9

    6. Compiled templates (for cache and Smarty internal use): ./templates_c 7. Dump of MySQL database is in ./sql/*.sql file. 8. Website images are located in ./*images directory. 9. Shipping modules ...

    Android代码-launcher

    Known bugs Changing the bar color won't take full effect until all UserscriptActivity instances are destroyed (i.e. rotating the screen or restarting the app) Fixed in 4.1.5 Creating a new thread, ...

    Steema TeeChart Pro VCL FMX Source Code 2017.20

    Release Notes 6th March 2017 TeeChart VCL/FMX version 2017 Build 2017.20.170306 New Features: -------------------------- A new Hindi translation has been added in this build. For an overview of ...

    BugsPy:BugsPy是用于从Bugs.co.kr下载流式曲目的工具

    概述BugsPy是用于从下载流式曲目的工具在上测试基于项目结构先决条件Python 3.6+ Bugs.co.kr订阅特征16位无损支持艺术家批处理Bugs.co.kr客户端广泛的标记定时歌词订阅安装与设定$ git clone ...u 错误网址...

    Android代码-Slide

    [/r/slideforreddit](https://www.reddit.com/r/slideforreddit/) subreddit, which anybody is welcome to join. Contributing Issues In any project it's likely that a few bugs will slip through the cracks, ...

    java反编工具java反编工具

    6. Changes in DJ icon in the system tray. 7. "Opened Files History" form added. 8. "Processor Usage (%)" information added in "System Information" form. THE STATUS OF DJ JAVA DECOMPILER: DJ Java ...

    IE6的BUG及修复 谓防患于未然的策略

    原文:Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs翻译:http://www.vfresh.org/w3c/727(译文对原文进行了补充) 在讨论IE6的BUG及如何修复之前,有必要讲叙一些策略去避免这些恼人的问题——...

    lwip源码(小型TCP/IP协议栈)

    Submit patches and bugs via the lwIP project page: http://savannah.nongnu.org/projects/lwip/ Continuous integration builds (GCC, clang): https://travis-ci.org/lwip-tcpip/lwip DOCUMENTATION Self ...

    OpenFOAM-3.0.1.tgz

    OpenFOAM 开源CFD工具箱 OpenFOAM-开源CFD工具箱。...问题(错误)跟踪:https : //bugs.openfoam.org- 用户指南:https://cfd.direct/openfoam/用户指南 特征 网格生成 不可压缩的流动 多相流 浮力驱动的流量

    GDI+_Demos154036262003

    Several bugs fixed in TLB and a few additions. If you don't have XP or Win2k SP3 then you must install GDI+(free from Microsoft) at http://www.microsoft.com/downloads/release.asp?releaseid=32738. ...

    配置文件封装类

    配置文件封装类// Ini.h: interface for the CIni class. // // Written by Bjarke Viksoe (bjarke@viksoe.dk) ...// // This code may be used in compiled form in any way you desire....// Beware of bugs.

    计算机专业计算机综合辅导教程上下册.part2.rar

    基本是按大纲编的,我还没有细看,希望对大家有用,照片是横过来拍的,不太方便看,ACDSee好像可以批量翻转的 计算机专业计算机综合辅导教程上下册.part1.rar http://download.csdn.net/source/1509929 ...

    计算机专业计算机综合辅导教程上下册.part1.rar

    基本是按大纲编的,我还没有细看,希望对大家有用,照片是横过来拍的,不太方便看,ACDSee好像可以批量翻转的 计算机专业计算机综合辅导教程上下册.part1.rar http://download.csdn.net/source/1509929 ...

Global site tag (gtag.js) - Google Analytics