ie6常见css bug

相信每个前端人都会有同感——ie6这东西真是万恶啊！就连ms也大力鼓励消费者淘汰ie6，不过很不幸，大概是因为xp绑定了ie6，因此在国内ie6的市场占有率仍高达42.43%，这是今年2月份的数据。也正因ie6的高占有率，因此在网站开发时也不得不考虑兼容ie6，就算不做到完美兼容，来个基本兼容也是必须的，起码不要让你的网站在ie6中乱套了。今天就跟大家分享一些平时积累的ie6 bug解决方法。

 

IE6双倍边距bug

当页面内有多个连续浮动时，如本页的图标列表是采用左浮动，此时设置li的左侧margin值时，在最左侧呈现双倍情况。如外边距设置为10px， 而左侧则呈现出20px，解决它的方法是在浮动元素上加上display:inline;的样式，这样就可避免双倍边距bug。

 

3像素问题及解决办法

当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了。解决方法有几种，对于网上非常流行的给右侧div增加margin-right: -3px我不是很赞同，大大增加了布局的复杂度并且如果父div有设置浮动的话就会失效，简单高效的解决办法是在父div里设置overflow:hidden。

 

当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？

这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度，zoom:1;是为了兼容 IE6而使用的CSS HACK。zoom:1;通不过W3C的验证，这也是遗憾的一点，幸好IE支持<!--[if IE]>这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的<!--[if IE]>中，这样应该可以通过验证了。

 

超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A
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;}

 

IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

 

IE6文字溢出BUG
说明：注释造成文字溢出是IE的BUG。

 

一个空格引发CSS失效
这 段代码对<p>的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font- size:300%}加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first- letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符"-"。IE有个BUG，在处理伪类时，如果伪 类的名称中带有连字符"-"，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。

 

IE6中奇数宽高的BUG
IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。

 

IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0

 

ie6下空标签高度问题
一个空div如果高度设置为0到19px，IE6下高度默认始终19PX。
例如：
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}
<div></div>

如果不让它默认为19PX。而是0PX的话
解决方法有3种：
1.css里面加上overflow:hidden;
2.div里面加上注释,
<div><!– –></div>
3.css里面加上line-height:0;然后div里面加上#nbsp;,
<div>&nbsp;</div>(#换成&)

 

修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：

• 确保所有的元素使用”display:inline;”
• 在最后一个元素上使用一个”margin-right:-3px;”
• # 为浮动元素的最后一个条目使用一个条件注释，比如：
  <!–[if !IE]>Put your commentary in here…<![endif]–>
• 在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)