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