CSS精粹：Bug汇总
本系列内容由ZouStrong整理收录
仅以此文纪念那些与IE6和IE7的斗争的日子
1. IE6不支持PNG24透明
问题描述：IE6下，PNG24透明图有灰底
解决方案1：使用IE专属的滤镜
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
enabled=true, sizingMethod=scale,src='images/img.png');解决方案2：使用DD_belatedPNG.js插件
<!--[if lte IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
//要使用滤镜的图片的选择器，扩多个，逗号分隔
DD_belatedPNG.fix('.strong img,.imgs');
</script>
<![endif]-->总结回顾：
方案1只对背景图有效，且滤镜里图片的路径是相对于html页面而不是相对于CSS文件
使用方案1时，在IE6下，应用背景的元素内的a链接将失效，此时对a链接设置position:relative即可（但是应用背景的元素不能够设置position属性，否则a链接还是不生效，可以对该元素的父元素设置position属性）另外的解决方法就是让链接不包含在元素内，而是通过定位显示在元素上即可
方案2对前景图和背景图都有效果
2. IE6不支持position:fixed
问题描述：IE6下，对元素设置position:fixed不起作用
解决方案：
* html div
{_position:absolute;_left:expression(eval(document.documentElement.scrollLeft+10));_top:expression(eval(document.documentElement.scrollTop+100))}或者从右下角开始定位
* html div
{_position:absolute;_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clIEntWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clIEntHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}此外，不管是上面哪种方法，都要再加一句，防止定位元素抖动
* html,* html body {background-image:url(about:blank);background-attachment:fixed}总结回顾：
此方法运用了只有IE6才能识别的选择符级hack
3. IE6不支持非a元素上的:hover
问题描述：IE6下，对非链接元素设置:hover伪类无效
解决方案：使用JS或者在非a元素内加入a标签
4. IE6不支持border-color:transparent
问题描述： IE6下，对边框设置transparent无效
解决方案：
border:solid 1px transparent;
_border-color:tomato;
_filter:chroma(color=tomato);5. IE6不支持容器的高度小于12px
问题描述： IE6下，容器高度无法小于12px
解决方案：设置容器 _font-size为0即可
p {height : 5px ; _font-size: 0 ;}但此时高度仍然不能小于2px，若想设置高度为0或者1px，则需使用
p {height : 1px ; _font-size: 0 ;_overflow : hidden ;}6. IE6不支持同一规则内相同样式的!important规则
问题描述： IE6下，同一个大括号里对同一个样式有两个及更多属性定义，其中一个加 !important 则 !important标记被忽略
P { width : 100px !important; width : 200px ;} /*IE6下宽度为200px*/解决方案：
P { width : 100px !important;}
P { width : 200px ;}总结回顾：
如果这同一个样式在不同大括号里定义，其中一个加!important 则!important发挥正常作用
一般会利用这个来实现特殊效果
7. IE6不支持 :first-line/:first-letter
问题描述： IE6下， 不支持上述伪元素（或者说支持不够完善）
解决方案：选择符与大括号“{”之间留有空格或者回车换行书写
总结回顾：使用书写这两个伪类时，是全浏览器兼容的
8. IE6不支持min-height(min-width)
问题描述： IE6下，对元素设置min-height无效
解决方案1：
p {
height : auto !important ;
height : 400px ;
min-height : 400px ;
}解决方案2：
p {
_height : 400px ;
min-height : 400px ;
}总结回顾：
设置最小高度后，只要再为IE6设置高度即可（IE6会撑开固定宽高的父元素）
但此时不能再为元素设置overflow除visible之外的值，都则模拟min-height将失效
9. IE6撑开固定宽高的父元素BUG
问题描述： IE6下，子元素宽高大于固定宽高的父元素时，会把父元素撑开（其它浏览器下都是超出父元素）
解决方案：
父元素设置
_overflow:hidden;子元素设置
_position:relative;10. IE6 select的层级过高BUG
问题描述： IE6下，不管z-index值多高，元素始终无法覆盖select（弹窗经常遇到）
解决方案：
<iframe style="position:absolute;left:0;top:0;width:100px;height:100px;z-index:5; border:0; src="" scrolling="no" ></iframe> 总结回顾：
将iframe元素元素翻盖在select之上（大小根据select元素来），并且保证iframe的z-index值小于弹窗即可，一物降一物！
11. IE6浮动元素双倍外边距BUG
问题描述： IE6下，当浮动元素的浮动方向和浮动边界的方向一致时，最靠近浮动边界的浮动元素出现双倍margin
解决方案：为该元素设置 _display : inline 即可
12. IE6 3像素BUG
问题描述： IE6下，当浮动元素与非浮动元素水平相邻时，两者之间产生3px像素间距
解决方案1：在浮动元素产生间距的方向设置margin-left(right):-3px即可
解决方案2：将非浮动元素设置宽度后，也设置浮动
总结回顾：
浮动和非浮动元素相邻，无非就是想做自适应宽度布局，所以方案2会导致变为固定宽度布局，不够完美
13. IE下 蓝色边框 BUG
问题描述： IE 下，当a包含img时，会出现蓝色边框
解决方案：为img设置 border : 0 即可
14. IE6下 文本溢出BUG
问题描述：
.test{zoom:1;overflow:hidden;width:500px;}
.box1{float:left;width:100px;}
.box2{float:right;width:400px;}
<div class="test">
<div class="box1"></div>
<!-- 注释 -->
<div class="box2">↓这就是多出来的那只猪</div>
</div>解决方案1：删除box1和box2之间所有的注释
解决方案2：不设置浮动
解决方案3：调整box1或box2的宽度，比如将box1的宽度调整为90px
总结回顾：
造成此BUG的原因可能是多重混合的，如浮动，注释，宽高定义等等。并且注释条数越多，溢出的文本也会随之增多
15. IE6、IE7下 li内部行内元素导致底部产生空白 BUG
问题描述：
IE6下，对li元素内部的行内元素设置display:block后，li底部产生空白
解决方案：对行内元素设置 zoom:1 ;
16. IE6、IE7下 li内部浮动元素导致底部产生空白 BUG
问题描述： IE6、IE7下，当li元素中出现浮动的子元素时，li底部产生空白间隙（li的子元素浮动仅仅是BUG产生的必要条件，这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一：width、height、zoom、）
解决方案：
为li元素设置vertical-align ，任何值都可以 如： li {vertical-align:top }
17. IE6、IE7下overflow:hidden失效
问题描述： IE6、IE7下，子元素相对定位时，父元素的overflow:auto和hidden失效
解决方案：为父元素也设置 position : relative 或absolute;
18. IE6、IE7下 按钮留白 BUG
问题描述：
IE6、IE7下，随着value增多，两边空白页随着增加
解决方案：
input ，button {overflow : visible ; }19. IE6、IE7 background-color BUG
问题描述： IE6和IE7下，background-color不会延伸到border底下
解决方案：暂无
总结回顾：
正常情况下，背景色会同时存在于内容区、padding和border下，而IE6、7下，背景色不会延伸到border下
20. IE6、IE7下 display:inline-block BUG
问题描述： IE6、IE7下，对于块级元素使用display:inline-block无效
解决方案1：在第二个声明里声明display : inline
P { display : inline-block ;}
P { display : inline ;}解决方案2：
P { display : inline-block ;*zoom:1; *display : inline;}21. IE6、IE7、IE8和火狐老版本 不支持opacity
问题描述： IE6~IE8下，不支持CSS3属性opacity
解决方案：
使用IE专属滤镜属性
filter:alpha(opaity=50);使用火狐（老版本）专属属性
-moz-opacity:0.5;22. Chrome在应用transition时页面闪动
问题描述：在Chrome下，使用过渡效果transition时有时会出现页面闪动
解决方案：
-webkit-transform-style:preserve-3d;
或
-webkit-backface-visibility:hidden;23. IE6.0-8.0不支持使用 rgba 模式实现透明度
问题描述：如题
解决方案：可使用 IE 滤镜处理
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000);总结回顾：
88000000 的前两位数字控制透明度，取值16进制从00 -> FF（越小越透明），00表示完全透明，FF就是全不透明，后面六位是色值