轉一篇譯文《IE6 终极备忘：修复IE6下 25+ Bugs》

双边距Bug

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

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

清除浮动

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

示例：

<div id="container">
<div id="floated1"></div>
<div id="floated2"></div>
</div>

#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;}

译者常用的方式：

#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提供了详细的解决方法。

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

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

扩展阅读：

IE hasLayout and the return of the Guillotine bug

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

IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。Paul O’Brien有关这个bug有一篇文章来讲解，另有简译版本IE6 绝对定位元素的 1px 间距 bug。

3像素间距bug

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

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

<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;的子元素，如下例：

<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下就会有错误的表现：

<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示例：

<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代码：

<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来解决这个问题：

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;）

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>包含的文本末尾添加一个空格：

<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：

ExplorerCanvas (also called excanvas)
ExplorerCanvas Google Group
MooCanvas at Github, a MooTools implementation of excanvas

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：

<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;。

.firstfloat {display:inline;}

IE的收藏夹图标(Favicons)

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

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

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

扩展阅读：

How to Add a Shortcut Icon to a Web Page

IE6的GZip

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

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

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

〖相关资源〗

修订历史：
2010-02-04 修正最小高度部分important的说明；

Tags: ie bug

Pages: 1 2 3

嗰個人·徽

双边距Bug

清除浮动

示例：

扩展阅读：

浮动层错位

扩展阅读

躲猫猫bug

扩展阅读：

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

3像素间距bug

IE下z-index的bug

扩展阅读：

Overflow Bug

〖列表问题〗

横向列表宽度bug

列表阶梯bug

垂直列表间隙bug

BUG代码：

解决方法：

扩展阅读：

〖行为〗

IE6中的:hover

在IE浏览其中使用`Canvas`标签

修复canvas的一些JavaScript：

IE6调整窗口大小的 Bug

〖JavaScript〗

Error: Expected Identifier, String, Or Number

IE中JavaScript内存泄露

〖其他〗

文本重复Bug

IE的收藏夹图标(Favicons)

扩展阅读：

IE6的GZip

〖相关资源〗

Leave a Reply Cancel reply

双边距Bug

清除浮动

示例：

扩展阅读：

浮动层错位

扩展阅读

躲猫猫bug

扩展阅读：

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

3像素间距bug

IE下z-index的bug

扩展阅读：

Overflow Bug

〖列表问题〗

横向列表宽度bug

列表阶梯bug

垂直列表间隙bug

BUG代码：

解决方法：

扩展阅读：

〖行为〗

IE6中的:hover

在IE浏览其中使用Canvas标签

修复canvas的一些JavaScript：

IE6调整窗口大小的 Bug

〖JavaScript〗

Error: Expected Identifier, String, Or Number

IE中JavaScript内存泄露

〖其他〗

文本重复Bug

IE的收藏夹图标(Favicons)

扩展阅读：

IE6的GZip

〖相关资源〗

Leave a Reply Cancel reply

在IE浏览其中使用`Canvas`标签