ie6常见bug及其解决办法
一、IE6双倍边距bug
如下图所示，一个样式里面既设定了“float：left；”又有“margin-left：100px；”的情况，就呈现了双倍情况。如外边距设置为100px， 而左侧则呈现出200px，解决它的方法是在浮动元素上加上display:inline;的样式，或者尽量少用这种形式，这样就可避免双倍边距bug。
IE6和FF下：
image.png
二、3像素问题及解决办法
问题：2列布局。左列固定，右列液态
当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了。解决方法有几种，对于网上非常流行的给右侧div增加margin-right: -3px我不是很赞同，大大增加了布局的复杂度并且如果父div有设置浮动的话就会失效，解决方法：可以同样给右侧设置左浮动。(还有其他方法)
image.png
IE6和FF下：
image.png
三、当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？
解决方案1：在父容器上添加overflow:hidden或overflow:auto;zoom:1; 这两个样式属性，overflow:auto; 是让父容器来自适应内部容器的高度，zoom:1;是为了兼容 IE6而使用的CSS HACK。
解决方案二：父容器也浮动，使其都变成浮动队列。
解决方案三：父容器添加一个clearFix类。
四、超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A（一般现在只用hover就可以了）
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
五、li在IE中底部3像素的BUG（增加浮动解决问题）
设计原型：
两个红色中间是<li>1px的底边框；
在IE6，IE7下显示为（如图）：貌似<li>多了个 margin-bottom:3px；
image.png
解决方案：在<li>上加float:left；
问题解决了，当然根据设计稿的精神还要加个width:100%；以前我们老是研究清除浮动，想不到今天却用增加浮动来解决问题
六、li在IE中底部空行的BUG
li在IE中底部出现的不是3像素而是一整条空白行
image.png
CSS样式代码如下：
- {padding:0;margin:0;}
li a {background:#CCC; border-bottom:1px #000 solid; text-decoration:none; display: block; }
li a:hover {background:#BBB;}
IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。
解决方案1：在li a 样式中加入zoom:1；
解决方案2：在li 样式中加入display:inline；float:left;width:100%;
七、IE6中奇数宽高的BUG
IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。
image.png
IE6下：
image.png
八、IE6下为什么图片下方有空隙产生
Img换行产生间距
解决方案一：img 为display:block或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom。
解决方案二：设置父容器的字体大小为零，font-size:0;或者是从左到右排列的img浮动都可清楚图片之间的间距。
九、ie6下空标签高度问题
一个空div如果高度设置为0到19px，IE6下高度默认始终19px。
例如：.text { background-color:#f00; height:0px; /*给定任何小于20px的高度 */} <div></div>
如果不让它默认为19PX。而是0PX的话
解决方法有3种：
1.css里面加上overflow:hidden;/font-size:0;
2.div里面加上注释；<div><!– –></div>
3.css里面加上line-height:0px; 然后div里面加上 ；<div> </div>
十、IE6重复文字bug
在IE6下DIV容器中双Float元素字符可能会出现文字重复的情况。
在IE6下，浮动层之间有注释文字的话，之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制，但是代码里查看文字可并没有多出来。
image.png
例如：
image.png
用IE6看一下，你会发现真的会多出一个影字！
问题原因以及解决方法：
原因：
一个容器包含2两个具有“float”样式的子容器。
第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小3（说到3，这里稍微多说一句——IE7还修正了IE6中的一个bug，bug名字就叫做“3像素bug”）。
在第二个容器前存在注释（这也是为什么此bug也叫做“IE6注释bug”的原因）。
由注释造成文字溢出，属于IE6的BUG，溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。
解决办法：
1、不放置注释。最简单、最快捷的解决方法；
2、注释不要放置于2个浮动的区块之间；
3、将文字区块包含在新的<div></div>之间，如：<div style=”float:right;width:400px”><div>歌剧院的魅影</div></div>；
4、去除文字区块的固定宽度，与3有相似之处；
5、在后面加一个<br />或者空格；（不推荐）
6、使用IE注释格式，将 写成。
7、给盒子加position:relative;属性
十一、PNG半透明图片的问题(png24位)
ie7+,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明。很多人说IE6不支持PNG透明，其实IE支持100%透明的PNG，疯狂的IE6只是不支持png的Alpha透明。
解决方案：透明图片存储为png8与存储为png24分别强制刷新或引入JS的png透明插件。虽然可以通过JS等方式解决，但依然存在载入速度等问题，所以，这个在设计上能避免还是尽量避免为好，以达到网站最大优化。
十二、IE6下的圆角
IE6不支持CSS3的圆角，性价比最高的解决方法就是用图片圆角来替代，或者放弃IE6的圆角。
十三、100% 高度
在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。
1、定位属性：相对父元素定位的宽度必须设定。
2、浮动属性：浮动后相应的父元素将没有高度，不会被撑开
修改方法：（1）父元素浮动——float (2)overflow:hidden (3) clearfix——clearfix:after{content:".";display:block;font-size:0;line-height:0;clear:both;overflow:hidden;} clearfix{zoom:1;}（4）父元素设高度。
3、内联元素与内联块元素换行会产出间距，这时需要display:block;或浮动，清除间距。
4、横向列表宽度bug
如果你使用float:left;把<li>横向摆列，并且<li>内包含的<a>（或其他）触发了 hasLayout，在IE6下就会有错误的表现。解决方法很简单，只需要给<a>定义同样的float:left;即可。
5、列表阶梯bug
列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发，我们本意是要做一个横向的列表(通常 是导航栏)，但IE却可能呈现出垂直的或者阶梯状。解决办法就是给<li>定义float:left;而非子元素<a>，或者 给<li>定义display:inline;也可以解决。
6、垂直列表间隙bug
当我们使用<li> 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（<li>）之间添加空隙。
解决方法：把<a>flaot并且清除float来解决这个问题；另外一个办法就是触发<a>的hasLayout（如定义高宽、使用zoom:1;）；也可以给<li> 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。
7、IE6怪异解析之padding与border算入宽高
原因：未加文档声明造成非盒模型解析
解决方法：加入文档声明<!doctype html>
8、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9，9要分给文字的上面与下面，怎么分？IE6就会与其它的不同，所以，尽量避免。
1）字体大小为奇数之边框高度少1px
解决方法：字体大小设置为偶数或line-height为偶数
2）line-height，文本垂直居中差1px
解决方法：padding-top代替line-height居中，或line-height加1或减1
3）与父标签的宽度的奇偶不同的居中造成1px的偏离
解决方法：如果父标签是奇数宽度，则子标签也用奇数宽度;如果是父标签偶数宽度，则子标签也用偶数宽度
9、内部盒模型超出父级时，父级被撑大
解决方法：父标签使用overflow:hidden
10、行标签之间会有一小段空白
解决方法：float或结构并排(可读性差，不建议)
11、左浮元素margin-bottom失效
解决方法：显示设置高度 or 父标签设置_padding-bottom代替子标签的margin-bottom or 再放个标签让父标签浮动，子标签
margin- bottom，即(margin-bottom与float不同时作用于一个标签)
12、position下的left，bottom错位
解决方法：为父级(relative层)设置宽高或添加*zoom:1
13、IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。，例如：p > .list{}
网友评论