初學(xué)html和css時，每天切圖，總會遇到很多瀏覽器兼容性問題。最近一直關(guān)注移動平臺開發(fā)，就html和css來說，不用考慮那么多瀏覽器兼容性問題。到現(xiàn)在，以至于很多瀏覽器兼容性幾乎忘光了。今天把以前總結(jié)的知識拿來分享一下，順便自己也復(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 在各個瀏覽器下img有空隙(原因是：回車。)
解決方法:讓圖片浮動。
4 一個父標(biāo)簽與幾個子標(biāo)簽嵌套，父標(biāo)簽不浮動，子標(biāo)簽float，子標(biāo)簽不撐開父的高度。
解決方法：a 在子標(biāo)簽最后清浮動{<div style="height:0;clear:both;"> </div>}
? ? ? ? ? ? ? ? ? b 父標(biāo)簽添加{overflow：hidden；}
? ? ? ? ? ? ? ? ? c 給父標(biāo)簽設(shè)置高度
5 Ie6下，不識別最大寬、高度和最小寬高度，意即min-width/height和 Max-width/height在ie6中沒效果，
解決方法：(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;}（因為ie6有一個特征，當(dāng)定義一個高度時，如果內(nèi)容超過高度，元素會自動調(diào)整高度。）
6 Ie6里面：如li設(shè)寬、高，并且li里面的標(biāo)簽浮動，那么li之間會有間距
解決方法：li不設(shè)寬、高或者li內(nèi)的標(biāo)簽不浮動
7 ?li之間有間距
解決方法：li 設(shè)置vertical-align:middle;
8 3像素問題：ie6下，當(dāng)浮動元素與流動元素并列顯示時，他們之間會存在三像素問題。
? ?解決方法：用hack技術(shù)， 例如：所有瀏覽器通用 height:100px;?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie6專用_height:100px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie7專用*+height:100px;?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie6/ie7共用*height:100px;
9 當(dāng)定義行內(nèi)元素為包含框時，且包含框包含的絕對定位元素以百分比為單位進行定位時，會出現(xiàn)混亂。
? ? 解決方法：在行內(nèi)元素里加入{zoom：1；}
10 當(dāng)多個浮動元素中間夾雜著HTML注釋語句時，如果浮動元素寬度為100%，則在下一行多顯示一個上一行最后一個字符。
? ? ? ? 解決辦法：給浮動元素添加display:inline;。
11 opacity 定義元素的不透明度
? filter：alpha（opacity=80）；/*ie支持該屬性*/
? opacity：0.8；/*支持css3的瀏覽器*/
12 兩個塊元素，豎向的margin值不增加，會重疊，其間距為最大margin值。
13 優(yōu)先級：被!important 注明的css屬性具有最高優(yōu)先級(.abc{color:red !important;})。但在ie6中!important具有一個bug:在同一組css屬性中，!important不起作用。
14?火狐不識別background-position-y 或background-position-x;
---------------------------2014.01.10補充-------------------------------
15 ie6 不支持 fixed?
/*對于非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實現(xiàn)該效果，但這個東東會閃爍，需要以下代碼*/*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無論設(shè)置多高都不起作用情況。這種情況發(fā)生的條件有三個：1、父標(biāo)簽position屬性為relative；2、問題標(biāo)簽含有浮動(float)屬性。
2）所有瀏覽器：它只認(rèn)第一個爸爸
層級的高低不僅要看自己，還要看自己的老爸這個后臺是否夠硬。用術(shù)語具體描述為：
父標(biāo)簽position屬性為relative或absolute時，子標(biāo)簽的absolute屬性是相對于父標(biāo)簽而言的。而在IE6下，層級的表現(xiàn)有時候不是看子標(biāo)簽的z-index多高，而要看它們的父標(biāo)簽的z-index誰高誰低。
18 ?ie各個版本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*/
