ie6兼容问题汇总
這幾天在查找和解決網頁在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.runtimeStyle.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;。
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
轉載于:https://www.cnblogs.com/xfx0725/p/6214686.html
總結
- 上一篇： 梦到前任的妈妈什么意思
- 下一篇： 分页插件--根据Bootstrap Pa