初學(xué)html和css時(shí)缩宜，每天切圖粘都，總會(huì)遇到很多瀏覽器兼容性問(wèn)題廓推。最近一直關(guān)注移動(dòng)平臺(tái)開(kāi)發(fā)，就html和css來(lái)說(shuō)翩隧，不用考慮那么多瀏覽器兼容性問(wèn)題樊展。到現(xiàn)在，以至于很多瀏覽器兼容性幾乎忘光了堆生。今天把以前總結(jié)的知識(shí)拿來(lái)分享一下专缠，順便自己也復(fù)習(xí)一下。當(dāng)然淑仆，其中肯定有很多不足涝婉，望指正啊。
1 ie6.0橫向margin加倍
產(chǎn)生因素：塊屬性蔗怠、float墩弯、有橫向margin。
解決方法：display：inline寞射；
2 ie6.0下默認(rèn)有行高
解決方法：overflow:hidden;或font-size:0;或line-height：xx px渔工；
3 在各個(gè)瀏覽器下img有空隙(原因是：回車。)
解決方法:讓圖片浮動(dòng)桥温。
4 一個(gè)父標(biāo)簽與幾個(gè)子標(biāo)簽嵌套引矩，父標(biāo)簽不浮動(dòng)，子標(biāo)簽float侵浸，子標(biāo)簽不撐開(kāi)父的高度旺韭。
解決方法：a 在子標(biāo)簽最后清浮動(dòng){<div style="height:0;clear:both;"> </div>}
? ? ? ? ? ? ? ? ? b 父標(biāo)簽添加{overflow：hidden；}
? ? ? ? ? ? ? ? ? c 給父標(biāo)簽設(shè)置高度
5 Ie6下通惫，不識(shí)別最大寬茂翔、高度和最小寬高度，意即min-width/height和 Max-width/height在ie6中沒(méi)效果履腋，
解決方法：(1)：.abc{border:1px blue solid;width:200px;height:200px;}
? ? ? ? ? ? ? ? ? ? ? ? ? html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}
? ? ? ??(2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}（因?yàn)閕e6有一個(gè)特征珊燎，當(dāng)定義一個(gè)高度時(shí)，如果內(nèi)容超過(guò)高度遵湖，元素會(huì)自動(dòng)調(diào)整高度悔政。）
6 Ie6里面：如li設(shè)寬、高延旧，并且li里面的標(biāo)簽浮動(dòng)谋国，那么li之間會(huì)有間距
解決方法：li不設(shè)寬、高或者li內(nèi)的標(biāo)簽不浮動(dòng)
7 ?li之間有間距
解決方法：li 設(shè)置vertical-align:middle;
8 3像素問(wèn)題：ie6下迁沫，當(dāng)浮動(dòng)元素與流動(dòng)元素并列顯示時(shí)芦瘾，他們之間會(huì)存在三像素問(wèn)題捌蚊。
? ?解決方法：用hack技術(shù)， 例如：所有瀏覽器通用 height:100px;?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie6專用_height:100px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie7專用*+height:100px;?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie6/ie7共用*height:100px;
9 當(dāng)定義行內(nèi)元素為包含框時(shí)近弟，且包含框包含的絕對(duì)定位元素以百分比為單位進(jìn)行定位時(shí)缅糟，會(huì)出現(xiàn)混亂。
? ? 解決方法：在行內(nèi)元素里加入{zoom：1祷愉；}
10 當(dāng)多個(gè)浮動(dòng)元素中間夾雜著HTML注釋語(yǔ)句時(shí)窗宦，如果浮動(dòng)元素寬度為100%，則在下一行多顯示一個(gè)上一行最后一個(gè)字符二鳄。
? ? ? ? 解決辦法：給浮動(dòng)元素添加display:inline;赴涵。
11 opacity 定義元素的不透明度
? filter：alpha（opacity=80）；/*ie支持該屬性*/
? opacity：0.8订讼；/*支持css3的瀏覽器*/
12 兩個(gè)塊元素髓窜，豎向的margin值不增加，會(huì)重疊欺殿，其間距為最大margin值纱烘。
13 優(yōu)先級(jí)：被!important 注明的css屬性具有最高優(yōu)先級(jí)(.abc{color:red !important;})。但在ie6中!important具有一個(gè)bug:在同一組css屬性中祈餐，!important不起作用。
14?火狐不識(shí)別background-position-y 或background-position-x;
---------------------------2014.01.10補(bǔ)充-------------------------------
15 ie6 不支持 fixed?
/*對(duì)于非IE6可以這樣寫*/#top{?position:fixed;?bottom:0;?right:20px; }?/*但是IE6是不支持fixed定位的哄陶，需要另外重寫*/#top{position:fixed;?_position:absolute;?top:0;?right:20px;?_bottom:auto;?_top:expression(eval(document.documentElement.scrollTop));}?/*使用hack使IE6實(shí)現(xiàn)該效果帆阳，但這個(gè)東東會(huì)閃爍，需要以下代碼*/*html{?background-image:url(about:blank);?background-attachment:fixed; }?/*使固定在頂部*/#top{?_position:absolute;?_bottom:auto;?_top:expression(eval(document.documentElement.scrollTop)); }?/*固定在底部*/#top{?_position:absolute;?_bottom:auto;?_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0))); }?/*垂直居中*/#top{?position:fixed;?top:50%;?margin-top:-50px;?_position:absolute;?_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2)); }
16 ?解決 ie6 最大屋吨、最小寬高 hack方法
/*?最小寬度?*/.min_width{?min-width:300px;?_width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);}/*?最大寬度?*/.max_width{?max-width:600px;?_width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);}/*?最小高度?*/.min_height{?min-height:200px;?_height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);}/*?最大高度?*/.max_height{?max-height:400px;?_height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);}
17z-index不起作用的 bug
1）ie6下 首先講講第一種z-index無(wú)論設(shè)置多高都不起作用情況蜒谤。這種情況發(fā)生的條件有三個(gè)：1、父標(biāo)簽position屬性為relative至扰；2鳍徽、問(wèn)題標(biāo)簽含有浮動(dòng)(float)屬性。
2）所有瀏覽器：它只認(rèn)第一個(gè)爸爸
層級(jí)的高低不僅要看自己敢课，還要看自己的老爸這個(gè)后臺(tái)是否夠硬。用術(shù)語(yǔ)具體描述為：
父標(biāo)簽position屬性為relative或absolute時(shí)，子標(biāo)簽的absolute屬性是相對(duì)于父標(biāo)簽而言的甩十。而在IE6下巧骚，層級(jí)的表現(xiàn)有時(shí)候不是看子標(biāo)簽的z-index多高，而要看它們的父標(biāo)簽的z-index誰(shuí)高誰(shuí)低圾结。
18 ?ie各個(gè)版本hack
/*類內(nèi)部hack：*/?.header?{_width:100px;}?/*?IE6專用*/?.header?{*+width:100px;}?/*?IE7專用*/?.header?{*width:100px;}?/*?IE6瑰剃、IE7共用*/?.header?{width:100px\0;}?/*?IE8、IE9共用*/?.header?{width:100px\9;}?/*?IE6筝野、IE7晌姚、IE8粤剧、IE9共用*/?.header?{width:330px\9\0;}?/*?IE9專用*//*選擇器Hack：*/?*html .header{}?/*IE6*/?*+html .header{}?/*IE7*/
