ie6/7 bug

1. png透明: 使用png8的索引色透明图片在ie6下正常显示

 

2. "猪"字被溢出

<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的那只猪</div>
</div>

 

解决办法:
1.不使用<!-- -->
2.去掉固定宽度
3.用新的元素包裹
4.display:inline;

 

3.ie6不解析!important,ie6中显示#f00
　　color:#f00;color:00f!important;

 

4.z-index无效，在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative
　　1、父标签 position属性为relative；
　　2、问题标签无position属性（不包括static）；
　　3、问题标签含有浮动(float)属性。
　　<div id="blank"></div>
　　　　<div style="position:relative; z-index:9999;">
　　　　<img style="float:left;" src="http://image.abv.com/a.jpg" />
　　</div>
解决办法:

                <div id="blank"></div>
                <div style="position:relative; z-index:1;">
                 <div style="position:relative; z-index:1000;">
                        <div style="position:absolute; z-index:9999;">
                         <img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
                        </div>
                    </div>
                </div>        

 

5. ie6 Float 3像素空隙bug
<style type="text/css">
　　#sideBar{
　　width:100px;
　　height:100px;
　　background:#6bee68;
　　float:left;
　　}
　　#content{
　　　　width:200px;
　　　　height:100px;
　　　　background:#56bcf3;
　　}
</style>
　　解决办法:
<style type="text/css">
#sideBar{
　　width:100px;
　　height:100px;
　　background:#6bee68;
　　float:left;
}
#content{
　　width:200px;
　　height:100px;
　　background:#56bcf3;
　　float:left;
}
</style>

 

6. 弹出层不能遮盖select问题

    ie6下div不能遮盖在select控件上,一般采用
        <div>
            <!–[if lte IE 6.0]>
            <iframe style="display:none;"></iframe>
            <![endif]–>
        <div>

 

7. ie6不支持 最大宽度、最小宽度、最大高度和最小高度

        .min_width{min-width:300px;
           /* sets max-width for IE */
           _width:expression(document.body.clientWidth < 300 ? "300px" : "auto");
        }    

8.具有margin属性的浮动元素可能引起著名的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题，尽管这不是必须的，你的CSS仍然是有效的。

9. 绝对定位元素的1像素间距bug
　　　　当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生1px错误，所以父元素必须使用偶数宽度(ie7已修复)。

10. 100%高度
　　　　在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。

11. 横向列表宽度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;即可。

12. 垂直列表间隙bug。当我们使用<li>包含一个块级子元素时，ie6中li之间会有空隙；
<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>

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