1. png透明: 使用png8的索引色透明图片在ie6下正常显示
2. "猪"字被溢出
↓这就是多出来的那只猪
解决办法:
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>解决办法:
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控件上,一般采用
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下还是坚排显示
解决办法: 只需要给定义同样的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>