这几天在查找和解决网页在ie6下的兼容性问题花了我不少的时间，参考了网上的一些解决方法和自己做出来比较有效果的给大家参考一下，也方便我日后再用到：
1.IE的cache设置为Every visit to the page，而不是默认的Automatically。基本上，只有开发者才会把cache设置为每次访问检查更新，所以这个bug其实不会影响真正的用户 （根据在winxpsp2的ie6下测试，虽然可能仍然调用了一次网络存取的api，但是并没有发生实际的请求，症状就是鼠标有极短时间的抖动但是图像不会闪烁），特别是在hover下，图片会发生抖动。
代码：
document.execCommand("BackgroundImageCache", false, true); //对背景图片进行缓存，避免每次访问都要从服务器端重新载入、来回折腾，加快页面加载速度。
用这种方法甚至避免了api调用，貌似是直接缓存在IE内存中（针对IE7以下的IE有效，其实在IE7中已经修复了这个Bug）。
css方法：
html {filter:expression(document.execCommand("BackgroundImageCache", false, true));}
js方法：
window.isIE=navigator.appName.indexOf("Microsoft")==0;
if(isIE){
document.documentElement.addBehavior("#default#userdata");
document.execCommand("BackgroundImageCache",false,true);
}
2.ie6下鼠标移到图片上hover.png图片透明背景的解决方法：
语法：
<script type="text/javascript">
DD_belatedPNG.fix('img图片class类名, 要hover的透明图片或容器的名字 a:hover');
</script>
*注意：a标签里面必须要加入href=""，鼠标移到图片上才可以更换背景图。
eg:
1 <head> 2 <!--[if IE 6]> 3 <script type="text/javascript" src="js/DD_belatedPNG.js"></script> 4 <script> 5 DD_belatedPNG.fix('.ico-A01, .ico-A01 a:hover'); 6 DD_belatedPNG.fix('.ico-A02, .ico-A02 a:hover'); 7 DD_belatedPNG.fix('.ico-A03, .ico-A03 a:hover'); 8 DD_belatedPNG.fix('.ico-A04, .ico-A04 a:hover'); 9 DD_belatedPNG.fix('.ico-B01, .ico-B01 a:hover'); 10 DD_belatedPNG.fix('.ico-B02, .ico-B02 a:hover'); 11 DD_belatedPNG.fix('.ico-B03, .ico-B03 a:hover'); 12 </script> 13 <![endif]--> 14 </head> 15 <body> 16 <div class="quick-line"> 17 <a href="" class="ico-A01"><span>社区</span></a> 18 <div class="cuttingLine"></div> 19 <a href="" class="ico-A02"><span>资讯</span></a> 20 <div class="cuttingLine"></div> 21 <a href="" class="ico-A03"><span>最新</span></a> 22 <div class="cuttingLine"></div> 23 <a href="" class="ico-A04"><span>移动</span></a> 24 </div> 25 <body>
css代码：
#quickbar .cuttingLine { float:right; height:1px; width:40px; background:url(../images/quickbarCuttingline.png) no-repeat center;}
#quickbar .ico-A01{display:block; float:right; height:40px; width:0; padding:10px 40px 10px 0; overflow:hidden; background:url
(../images/quickbarIcon.png) no-repeat 0 center;}
#quickbar .ico-A01:hover{ background:url(../images/quickbarIcon.png) no-repeat 20px center;}
#quickbar .ico-A02{display:block; float:right; height:40px; width:0; padding:10px 40px 10px 0; overflow:hidden; background:url
(../images/quickbarIcon.png) no-repeat -40px center;}
#quickbar .ico-A02:hover{ background:url(../images/quickbarIcon.png) no-repeat -20px center;}
#quickbar .ico-A03{display:block; float:right; height:40px; width:0; padding:10px 40px 10px 0; overflow:hidden; background:url
(../images/quickbarIcon.png) no-repeat -80px center;}
#quickbar .ico-A03:hover{ background:url(../images/quickbarIcon.png) no-repeat -60px center;}
#quickbar .ico-A04{display:block; float:right; height:40px; width:0; padding:10px 40px 10px 0; overflow:hidden; background:url
(../images/quickbarIcon.png) no-repeat -120px center;}
#quickbar .ico-A04:hover{ background:url(../images/quickbarIcon.png) no-repeat -100px center;}
*记得要引入一个DD_belatedPNG.js文件，附上js代码：
/** * DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>. * Author: Drew Diller * Email: drew.diller@gmail.com * URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/ * Version: 0.0.8a * Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license * * Example usage: * DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector * DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement **/ var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(document.namespaces&&! document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}},createVmlStyleSheet:function(){var b,a;b=document.createElement("style");b.setAttribute("media","screen");document.documentElement.firstChild.insertBefore (b,document.documentElement.firstChild.firstChild);if(b.styleSheet){b=b.styleSheet;b.addRule(this.ns+"\\:*","{behavior:url (#default#VML)}");b.addRule(this.ns+"\\:shape","position:absolute;");b.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");this.screenStyleSheet=b;a=document.createElement("style");a.setAttribute ("media","print");document.documentElement.firstChild.insertBefore (a,document.documentElement.firstChild.firstChild);a=a.styleSheet;a.addRule(this.ns+"\\:*","{display: none !important;}");a.addRule ("img."+this.ns+"_sizeFinder","{display: none !important;}")}},readPropertyChange:function(){var b,c,a;b=event.srcElement;if(! b.vmlInitiated){return}if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.applyVML(b)} if(event.propertyName=="style.display"){c=(b.currentStyle.display=="none")?"none":"block";for(a in b.vml){if(b.vml.hasOwnProperty(a)) {b.vml[a].shape.style.display=c}}}if(event.propertyName.search("filter")!=-1){DD_belatedPNG.vmlOpacity(b)}},vmlOpacity:function(b){if (b.currentStyle.filter.search("lpha")!=-1){var a=b.currentStyle.filter;a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf (")")),10)/100;b.vml.color.shape.style.filter=b.currentStyle.filter;b.vml.image.fill.opacity=a}},handlePseudoHover:function(a){setTimeout (function(){DD_belatedPNG.applyVML(a)},1)},fix:function(a){if(this.screenStyleSheet){var c,b;c=a.split(",");for(b=0;b<c.length;b++) {this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}}},applyVML:function(a) {a.runtimeStyle.cssText="";this.vmlFill(a);this.vmlOffsets(a);this.vmlOpacity(a);if(a.isImg){this.copyImageBorders (a)}},attachHandlers:function(i){var d,c,g,e,b,f;d=this;c={resize:"vmlOffsets",move:"vmlOffsets"};if(i.nodeName=="A"){e= {mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"};for(b in e){if (e.hasOwnProperty(b)){c[b]=e[b]}}}for(f in c){if(c.hasOwnProperty(f)){g=function(){d[c[f]](i)};i.attachEvent("on"+f,g)}}i.attachEvent ("onpropertychange",this.readPropertyChange)},giveLayout:function(a){a.style.zoom=1;if(a.currentStyle.position=="static") {a.style.position="relative"}},copyImageBorders:function(b){var c,a;c={borderStyle:true,borderWidth:true,borderColor:true};for(a in c){if (c.hasOwnProperty(a)){b.vml.color.shape.style[a]=b.currentStyle[a]}}},vmlFill:function(e){if(!e.currentStyle){return}else{var d,f,g,b,a,c;d=e.currentStyle}for(b in e.vml){if(e.vml.hasOwnProperty(b)){e.vml[b].shape.style.zIndex=d.zIndex}} e.runtimeStyle.backgroundColor="";e.runtimeStyle.backgroundImage="";f=true;if(d.backgroundImage!="none"||e.isImg){if(!e.isImg) {e.vmlBg=d.backgroundImage;e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}else{e.vmlBg=e.src}g=this;if(!g.imgSize[e.vmlBg]) {a=document.createElement("img");g.imgSize[e.vmlBg]=a;a.className=g.ns+"_sizeFinder";a.runtimeStyle.cssText="behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;";c=function() {this.width=this.offsetWidth;this.height=this.offsetHeight;g.vmlOffsets(e)};a.attachEvent("onload",c);a.src=e.vmlBg;a.removeAttribute ("width");a.removeAttribute("height");document.body.insertBefore(a,document.body.firstChild)}e.vml.image.fill.src=e.vmlBg;f=false} e.vml.image.fill.on=! f;e.vml.image.fill.color="none";e.vml.color.shape.style.backgroundColor=d.backgroundColor;e.runtimeStyle.backgroundImage="none";e.runtimeSt yle.backgroundColor="transparent"},vmlOffsets:function(d){var h,n,a,e,g,m,f,l,j,i,k;h=d.currentStyle;n={W:d.clientWidth+1,H:d.clientHeight +1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop};a=(n.L +n.bLW==1)?1:0;e=function(b,p,q,c,s,u){b.coordsize=c+","+s;b.coordorigin=u+","+u;b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";b.style.width=c+"px";b.style.height=s+"px";b.style.left=p+"px";b.style.top=q+"px"};e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T +(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);g={X:0,Y:0};if(d.isImg){g.X=parseInt (h.paddingLeft,10)+1;g.Y=parseInt(h.paddingTop,10)+1}else{for(j in g){if(g.hasOwnProperty(j)){this.figurePercentage(g,n,j,h ["backgroundPosition"+j])}}}d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);m=h.backgroundRepeat;f={T:1,R:n.W+a,B:n.H,L:1+a};l={X: {b1:"L",b2:"R",d:"W"},Y:{b1:"T",b2:"B",d:"H"}};if(m!="repeat"||d.isImg){i={T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)};if(m.search ("repeat-")!=-1){k=m.split("repeat-")[1].toUpperCase();i[l[k].b1]=1;i[l[k].b2]=n[l[k].d]}if(i.B>n.H){i.B=n.H} d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}else{d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}},figurePercentage:function(d,c,f,a){var b,e;e=true;b=(f=="X");switch(a){case"left":case"top":d[f] =0;break;case"center":d[f]=0.5;break;case"right":case"bottom":d[f]=1;break;default:if(a.search("%")!=-1){d[f]=parseInt(a,10)/100}else {e=false}}d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));if(d[f]%2===0){d[f]++}return d[f]},fixPng:function(c) {c.style.behavior="none";var g,b,f,a,d;if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){return}c.isImg=false;if (c.nodeName=="IMG"){if(c.src.toLowerCase().search(/\.png$/)!=-1){c.isImg=true;c.style.visibility="hidden"}else{return}}else{if (c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){return}}g=DD_belatedPNG;c.vml={color:{},image:{}};b={shape:{},fill: {}};for(a in c.vml){if(c.vml.hasOwnProperty(a)){for(d in b){if(b.hasOwnProperty(d)){f=g.ns+":"+d;c.vml[a][d]=document.createElement(f)}} c.vml[a].shape.stroked=false;c.vml[a].shape.appendChild(c.vml[a].fill);c.parentNode.insertBefore(c.vml[a].shape,c)}} c.vml.image.shape.fillcolor="none";c.vml.image.fill.type="tile";c.vml.color.fill.on=false;g.attachHandlers(c);g.giveLayout(c);g.giveLayout (c.offsetParent);c.vmlInitiated=true;g.applyVML(c)}};try{document.execCommand("BackgroundImageCache",false,true)}catch(r){} DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet();
3.窗口浮动之侧边栏悬浮框固定问题（让IE6支持固定定位的CSS写法）：
当页面过长，滚动条往下滚动时，侧边栏始终固定在屏幕上。关键代码说明：IE6并不支持CSS固定定位（position:fixed;），利用微软提供的expression方法来实现。在ie6下固定要用 _position:absolute; _right:0;_bottom:30px;
eg:截图一（当右下角的快捷栏距离底部30px）
#quickbar-nano { position:fixed; bottom:30px; right:0; width:30px; height:90px; line-height:15px; color:#FFF; z-index:990; display:block;
_position:absolute; _right:0; top: expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight-30+'px');}
还有一种写法我试过也可以：{top:expression(eval(document.body.scrollTop － 30));}
#quickbar-nano｛position:fixed; bottom:30px; right:0; width:30px; height:90px; line-height:15px; color:#FFF; z-index:990; display:block;
_position:absolute; _right:0;top:expression(eval(document.body.scrollTop － 30));}
截图二：
#quickbar { position:fixed; bottom:0; right:0; z-index:990; width:40px;height:100vh; height:100%\9; background:#666; display:block; _position:absolute; _right:0; top: expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight);}
这里有个使用js的例子：
*注意：bug:速度取整
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>跟随页面滚动的缓冲侧边栏</title> <style> #div1{width: 100px;height: 150px;background:red;position: absolute;right: 0;bottom: 0;} </style> <script> window.onscroll=function() { var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; // oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px'; startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
//通过运动框架慢慢走，不会出现闪烁问题了,因为除2可能出现0.5，所以要取整，才不会出现抖动 }; var timer=null; function startMove(iTarget){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var speed=(iTarget-oDiv.offsetTop)/4; speed=speed>0?Math.ceil(speed):Math.floor(speed); //向上取整和向下取整 if(oDiv.offsetTop==iTarget) { clearInterval(timer); }else{ oDiv.style.top=oDiv.offsetTop+speed+'px'; } },30); } </script> </head> <body style="height: 2000px;"> <input type="text" id="txt1" /> <div id="div1"></div> </body> </html>
4.关于ie6是不支持设置border或图片或其他标签的first-child和last-child伪类问题：
例如我们时常要设置border-right的最后一个border为0，但ie6是不认所谓的first-child和last-child的，怎么办呢？所以我们要另外找办法解决这个问题了。如果想改变第一个或最后一个标签的样式，用css的expression，在样式中加入 previousSibling 或 nextSibling 就可以了。
eg： li a{*margin-left:expression(this.previoussibling==null?'0':'20px'); border-right-width:0px;border-right-style:solid;border-color:#DAD3D0;*border-right-width:expression(this.nextSibling==null?"none":"0px"); *background-image:expression(this.nextSibling==null?"none":"none"); } //以上分别是：让第一个a标签margin-left：20px，让最后一个a标签的border-right:0，没有右边框，让最后一个a标签的background-image:none;没有背景图片。
不怎么清楚的可以往下看，比较详细：
#sidebar li:first-child{
border-top-style:none;
}
#sidebar li{
border-top-width:1px;
border-top-style:solid;
border-color:#DAD3D0;
*border-top-style:expression(this.previousSibling==null?"none":"solid");
}
代码解析
*border-top-style:expression(this.previousSibling==null?’none’:"solid’);
只有IE6和IE7能识别此行代码，第一个值’none’就是first-child的值，第二个值’solid’则是其他元素的值。
last-child原理相同，代码如下
#sidebar li:last-child{
border-bottom-style:none;
}
#sidebar li{
border-bottom-width:1px;
border-bottom-style:solid;
border-color:#DAD3D0;
*border-bottom-style:expression(this.nextSibling==null?"none":"solid");
}
我们希望在每条记录之间加上分隔符，一般会加border-bottom属性，但是最后一个<li>下面不能有，我们可以使用li+li选择符，改用border-top属性即可实现。
li+li{border-top: 1px dotted #999;}
试过真的有效的方法，在IE6下去掉border-right边框的显示：
#nav .type:last-child { border:0;}
#nav .type{border-right-width:0px;border-right-style:solid;border-color:#DAD3D0;*border-right-width:expression(this.nextSibling==null?"none":"0px");}
5.写ul列表时要注意css写法，不然在其他浏览器显示正常，在ie6下如果li里面的a标签内容超出就会往下掉了,要设置宽度，
eg:display:block;float:left;width:474px;。
<head> <style> #focus .hot-news .newslist { padding:5px 0;width:530px;overflow:hidden;text-overflow:ellipsis;*padding-bottom:expression(this.nextSibling==null?'0':'0');} #focus .hot-news .newslist:last-child { padding-bottom:0;} #focus .hot-news .newslist li { height:29px; font-size:16px; line-height:29px; color:#333; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;positi on:relative; } #focus .hot-news .newslist li .channel { display:block; float:left; width:46px; height:20px; margin:5px 10px 5px 0; font-size:14px; line-height:20px;
color: #06c; text-align:center; background:#dde9fa; border-radius:5px;} #focus .hot-news .newslist li a {display:block;float:left;width:474px; color:#333;text-overflow:ellipsis; white-space:nowrap;overflow:hidden;} #focus .hot-news .newslist li a:hover { text-decoration:underline;} </style> </head> <body> <div class="hot-news"> <ul class="newslist"> <li><a href="#" class="channel">爱车</a><a href="#" title="" 潮味"十足！汕头公交候车亭换上"文化装"="" 你见了吗"="" style="">"潮味"十足！汕头 公交候车亭换上"文化装" 你见了吗</a></li> <li><a href="#" class="channel">美食</a><a href="#" title="一道颜色好看又简单好做的三杯鸡便当 适合新手们学学" style="">一道颜色好看又简单好做的 三杯鸡便当 适合新手们学学</a></li> <li><a href="#" class="channel">旅游</a><a href="#" title="蓝天白云加阳光明媚 海天一色连成一体送来冬天的消息" style="">蓝天白云加阳光明媚 海天 一色连成一体送来冬天的消息</a></li> <li><a href="#" class="channel">校园</a><a href="#" title="学生创业创新大舞台！" i创业·校园创新营销大赛"启动"="" style="">学生创业创新大 舞台！"i创业·校园创新营销大赛"启动</a></li> <li><a href="#" class="channel">爱车</a><a href="#" title="12月1日新开第58路公交！南翔公交总站开往广厦新城" style="">12月1日新开第58路公交！南 翔公交总站开往广厦新城</a></li> <li><a href="#" class="channel">房产</a><a href="#" title="星湖城纠纷新进展~小区电梯故障排除消防全方位整改" style="">星湖城纠纷新进展~小区电梯 故障排除消防全方位整改</a></li> </ul> </div> </body>
以下是网上针对ie6的一些常用解决方法：
6.文本重复Bug
在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。解决办法：给浮动元素添加
display:inline;。
7.IE6调整窗口大小的 Bug
当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：给body定义position:relative;就行了。
8.垂直列表间隙bug
当我们使用<li> 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（<li>）之间添加空隙。
解决方法：把<a>flaot并且清除float来解决这个问题；另外一个办法就是触发<a>的hasLayout（如定 义高宽、使用zoom:1;）；也可以给<li> 定义
display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。
9.列表阶梯bug
列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发，我们本意是要做一个横向的列表(通常 是导航栏)，但IE却可能呈现出垂直的或者阶梯状。
解决办法就是给<li>定义float:left;而非子元素<a>，或者 给<li>定义display:inline;也可以解决。
10.横向列表宽度bug
如果你使用float:left;把<li>横向摆列，并且<li>内包含的<a>（或其他）触发了 hasLayout，在IE6下就会有错误的表现。解决方法很简单，只需要给<a>定义同样的float:left;即可。
11.Overflow Bug
在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。
12.IE下z-index的bug
在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。
13.绝对定位元素的1像素间距bug
IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。
14.3像素间距bug
在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔。
给浮动层添加 display:inline 和 -3px 负值margin
给中间的内容层定义 margin-right 以纠正-3px
15.躲猫猫bug
在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。
解决方法很简单：
1.在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span>
2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;
16.浮动层错位
当内容超出外包容器定义的宽度时，在IE6中容器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。
浮动层错位问题在IE6下没有真正让人满意的解决方法，虽然可以使用overflow:hidden;或overflow:scroll;来修正， 但hidden容易导致其他一些问题，
scroll会破坏设计；JavaScript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发 生，使用一个固定的布局或者控制好内容的宽度（给内层加width）。
17.清除浮动
如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。
代码：
#container {border:1px solid #333; overflow:auto; height:100%;}
#floated1 {float:left; height:300px; width:200px; background:#00F;}
#floated2 {float:right; height:400px; width:200px; background:#F0F;}
18.双边距Bug
当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。个人觉得较好解决方法是避免float和margin同时使用。
19.最小高度
IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法：使用ie6不支持但其余浏览器支持的属性!important。
#container {min-height:200px; height:auto !important; height:200px;}
20.最大高度
//直接使用ID来改变元素的最大高度
var container = document.getElementById('container');
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";
//写成函数来运行
function setMaxHeight(elementId, height){
var container = document.getElementById(elementId);
container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
}
//函数示例
setMaxHeight('container1', 200);
setMaxHeight('container2', 500);
21.100% 高度
在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。
22.最小宽度
同max-height和max-width一样，IE6也不支持min-width。
//直接使用ID来改变元素的最小宽度
var container = document.getElementById('container');
container.style.width = (container.clientWidth < width) ? "500px" : "auto";
//写成函数来运行
function setMinWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
}
//函数示例
setMinWidth('container1', 200);
setMinWidth('container2', 500);
23.最大宽度
//直接使用ID来改变元素的最大宽度
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
//写成函数来运行
function setMaxWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
}
//函数示例
setMaxWidth('container1', 200);
setMaxWidth('container2', 500);
24.IE6下的圆角
IE6不支持CSS3的圆角属性，性价比最高的解决方法就是用图片圆角来替代，或者放弃IE6的圆角。
25.子级中有设置position，则父级overflow失效
解决方法：为父级设置position:relative
26.position下的left，bottom错位
解决方法：为父级(relative层)设置宽高或添加*zoom:1
27.块元素中有文字及右浮动的行元素，行元素换行
解决方法：将行元素置于块元素内的文字前
28.li之间会有间距
解决方法：float: left;
29.img于块元素中，底边多出空白
解决方法：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;
30.左浮元素margin-bottom失效
解决方法：显示设置高度 or 父标签设置_padding-bottom代替子标签的margin-bottom or 再放个标签让父标签浮动，子标签 margin- bottom，即(margin-bottom与float不同时作用于一个标签)
31.标签高度无法小于19px
解决方法：overflow: hidden;
32.行标签之间会有一小段空白
解决方法：float或结构并排(可读性差，不建议)
33.line-height默认行高bug
解决方法：line-height设值
34.内部盒模型超出父级时，父级被撑大
解决方法：父标签使用overflow:hidden
35.以下三种其实是同一种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的偏离
解决方法：如果父标签是奇数宽度，则子标签也用奇数宽度;如果是父标签偶数宽度，则子标签也用偶数宽度
36.IE6怪异解析之padding与border算入宽高
原因：未加文档声明造成非盒模型解析
解决方法：加入文档声明<!doctype html>
另外补充一点知识：
DIV+CSS星号*
常常我们在DIV+CSS布局的时候会遇到2处使用星号“*”,一个为以星号*没有命名名称的CSS选择器；另外一个是在CSS选择器里以*开头的CSS属性单词样式-CSS
星号-CSS *知识介绍：
1.CSS星号*选择器
*{ padding:0; margin:0; font-family:"黑体"}，这里的“*”号是通配符，即指，网页html中所有标签成员的css样式为padding为0，margin为0,字体为黑体
。
2.CSS选择器内以(*)星号开头CSS单词
.divcss5{border:1px solid #000;width:220px;*width:300px;}，经过各大浏览器测试，我们会发现在IE6和IE7中宽度为300px，而在IE8及以上MSIE版本、谷
歌浏览器、火狐(FF)浏览器却显示为220px宽度。
在CSS选择器内星号+CSS样式属性单词，一般区别IE6和IE8、IE6和FF，IE7和IE8，IE7和FF浏览器之间属性CSS HACK。
什么是css hack ? css hack是什么？
简单地讲，css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的兼容bug误差(比如我们常说错位)的处理。
由于各浏览器的内核不同，所以会造成一些误差就像JS一样，一个JS网页特效，在微软IE6、IE7、IE8浏览器有效果，但可能在火狐（Mozilla Firefox）谷歌
浏览器无效，这样就叫做JS hack ，所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问
题就叫作CSS Hack。
CSS hack之区别不同浏览器的写法：
我们在开发DIV+CSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6、微软IE7、微软IE8、火狐浏览器、谷歌浏览器有一些不同，如宽
度、高度等地方有相差误。
IE6比较老的版本浏览器，用户比较多，
IE7较新浏览器，更接近标准浏览器，
IE8算是微软标准浏览器，但差别于浏览器，
火狐（Mozilla, Firefox）和谷歌浏览器（chrome）是比较标准的IE浏览器，一般我们以这个浏览器为开发参考平台，同时IE8与这两个浏览器解释CSS比较接
近，一般只要通过火狐、谷歌浏览器测试兼容，一般就能确定IE8.
因此一般我们区别这些浏览器CSS hack的方法就变得简单，我们只需考虑IE6\IE7\火狐（Firefox）这3个浏览器即可兼容全部浏览器。
具体区别如下：
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;以下是各浏览器CSS hack表格
IE6 IE7 FF
*
√ √ ×
!important × √ √
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6，IE7，firefox: background:orange;*background:green;_background:blue;
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
假如我们设置一个类名为exple的类CSS属性,CSS样式边框为1PX黑色边框，高度为100PX并要求，在IE6浏览器下宽度为100PX；IE7浏览器宽度下为150PX；火狐
IE8谷歌浏览器下宽度为200PX；(PX是长度单位像素)
则CSS代码如下：
.exple{border:1px solid #000; height:100px;width:200px; *width:150px !important; *width100px;}
这样只要在html设置一个div的类(class="exple"),这样这部分在火狐、IE8、谷歌浏览器下就会显示宽度为200px高度为100px带1px的黑边框的方块；IE7浏览
器宽度下为150PX高度为100px带1px的黑边框的方块；在IE6浏览器下就会显示出长度和宽度为100px的带1px黑边的正方形。
http://www.divcss5.com/css-hack/c23.shtml
