學習來源：
http://www.cnblogs.com/xiaohuochai/
http://blog.csdn.net/secsky/article/details/8425666
http://www.51itstudy.com/31686.html
https://www.zhihu.com/people/efanchy
兼容：
【1】IE6/IE7下給塊級元素設置inline-block樣式
原因：IE中對inline元素使用display:inline-block，也是不識別的，但使用display:inline-block在IE下會觸發layout，從而使inline元素可以支持寬高，纔會有display:inline-block屬性的表徵。但是對塊元素設置display:inline-block屬性，塊元素僅僅是被display:inline-block觸發了layout，而它本身就是行佈局，所以觸發後，塊元素依然還是行佈局。
解決方法：
1）先使用display:inline-block屬性觸發塊元素，然後再定義display:inline，讓塊元素呈遞爲內聯對象（兩個display 要先後放在兩個CSS聲明中才有效果，這是IE的一個經典bug，如果先定義了display:inline-block，然後再將display設回 inline或block，layout不會消失）。代碼如下：
div {display:inline-block;...}
div {display:inline;}
2）【推薦】直接讓塊元素設置爲inline對象呈遞（設置屬性*display:inline;），讓塊元素排成一行；*zoom:1的作用是觸
發hasLayout，能夠支持設置寬、高、line-height等一系列屬性。代碼如下：
div { display:inline-block; /*爲了現代瀏覽器 +IE6、7 inline 元素支持*/
*display:inline; *zoom:1; } /*爲了IE6/IE7支持*/
【2】去除 inline-block 空隙（換行被解析成空格）
原因：產生 inline-block 空隙的根本性原因是：HTML 中的換行符、空格符、製表符等合併爲空白符，字體大小不爲 0 的情況下，
空白符自然佔據一定的寬度，因此產生了元素間的空隙。
解決方法：
1）刪除換行符後，inline / inline-block元素間的空隙就消失了。
此方法犧牲結構來兼容表現，不建議。
2）【推薦】HTML 中的換行符、空格符、製表符等產生了空白符，而這些歸根結底都是字符，它們的大小都是受font-size 控制
的，inline-block 元素間的空隙並不是固定大小的。
font-size設爲0，可以解決大多數瀏覽器，除了IE6/IE7，IE6/7 inline 元素 inline-block 後設置 font-size:0 始終有 1px 的空隙，借
助word-spacing（檢索或設置對象中的單詞之間插入的空隔）代碼如下：
父級元素 { font-size：0； /* 所有瀏覽器 */
*word-spacing: -1px; } /* IE6、7 */
inline-block元素 { font-size: 12px; /*子元素的字符和單詞間距我們也要把它重置爲默認值。*/
letter-spacing: normal;
word-spacing: normal; }
注意：IE6/7IE6、7 block 元素設置成inline-block並不會產生空隙。
原因：根據【1】設置是要靠 IE 的 hasLayout，觸發 hasLayout 的元素表現出來的特徵是一個獨立的矩形容器，可以設置寬高而
不受外部元素的影響，類似於現代瀏覽器中的 BFC（塊級格式化上下文）的概念具有獨立性，所以產生 hasLayout 的元素之間表
現出來互不影響，這也表明 IE6/7 中的 inline-block 不能等同於 CSS2.1 中的 inline-block。如果非要說是有 bug， IE6、7 block
元素 inline-block 後不產生空隙纔是 bug。
【3】透明度兼容寫法
filter: Alpha(opacity=10); （0~100） /* IE */
opacity:0.1; （0~1） /*現代瀏覽器*/
bug：
【1】雙外邊距浮動
出現條件：塊元素有浮動，有和浮動的方向一致的margin。
解決方法：display:inline
.box { margin-left: 10px;
float:left;
display:inline; }
【2】div中嵌套img，底部有留白
原因：img是inline元素，inline元素默認 vertical-align: baseline ，（文字的基線是從圖片底部開始算起的），即圖片的下邊緣是
與容器的基線對齊，而不是緊貼容器下邊緣。而baseline與bottom之間是有一段距離的，留白就是這段距離。
解決方法：
1）當div中有文字時，設置img { vertical-align: bottom；}
將圖片下邊緣與line box的底端對齊，自然就去掉留白了。
2）有設置line-height時，div { line-height: 0; }
因爲top和bottom之間的距離爲line-height，line-height爲0，則baseline和bottom之間的距離也爲0了。
3）沒有設置line-height，且無文字時，div { font-size: 0; }
因爲line-height默認值是基於font-size的。
4）img { display：block; }
vertical-align只對inline元素有效，變成塊元素就不存在基線對齊的說法了。
【3】子元素的margin-top，margin-bottom值會傳遞給父級
原因：
相鄰元素疊加：這個比較好理解， 相鄰的兩個元素， 如果它們的上下邊距相遇，即會產生疊加。
父子元素疊加：包含元素的外邊距隔着父元素的內邊距和邊框， 當這兩項都不存在的時候， 父子元素垂直外邊距相鄰， 產生疊加。
注意：只有普通流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。
解決方法：
1）重疊問題，只要讓它們不在同一個 BFC 內就行。
對於相鄰元素，只要給它們加上 BFC 的外殼，就能使它們的 margin 不重疊；
對於嵌套元素，只要讓父級元素觸發 BFC，就能使父級 margin 和當前元素的 margin 不重疊。
觸發BFC的方式 float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline
-block）、position（除了static/relative）
IE6下觸發haslayout *zoom：1;
如下：可在.container { overflow: hidden; *zoom: 1; } 支持IE6
2）或是隻用上或只用下邊距，這樣就不存在疊加的機會
【4】在IE6下元素的高度的小於19px的時候，會被當做19px來處理
解決方法：
1）font-size: 0;
div { height: 1px;
font-size: 0；
}
此方法在IE6下，最小到2px，不會爲0。
2）【推薦】overflow: hidden;
div { height: 1px;
overflow: hidden;
}
超過height 1px的部分會被隱藏掉。
【5】IE5/6 下浮動元素與非浮動元素在一起，會發生3px偏移（包括文本和圖片）
解決方法：加負3px外邊距
.floatBox { float: left;
*margin-right: -3px; }
往右浮動，則用margin-left。
【6】IE6下出現重複字符(文字溢出)
出現條件：子元素的寬度和父級的寬度相差小於3px 或是 兩個浮動元素中間有註釋或者內嵌元素的時候，溢出文字的字數=註釋/內
聯的條數*2-1
解決辦法：將溢出文字所在文字區塊包含在新的<div></div>之間。
【7】在IE6/7下，li本身沒浮動，但是li的內容有浮動，li與li之間會產生一個間隙
解決辦法：
1）給li加浮動
2）給li加vertical-align: top;
注意：當與19px最小高度bug並存時，採用1）方法加上最小高度的解決方法。
【8】在IE6/7下，子元素有相對定位的話，且範圍比父級大，父級的overflow包不住子元素。
解決方法：
給父級也加定位 position: relative / absolute;
【9】在IE6，7下輸入類型的表單控件輸入文字的時候，其背景圖片會跟着一塊移動 。
解決辦法：
在input外包一層div，把圖片背景加給父級div，自身去除boder和background，大小和div一樣。
【10】在IE6下，元素負margin超出父元素的部分會被隱藏掉。
解決方法：
這個問題可以通過設置margin負值元素的position屬性值爲relative來解決。
未完待續。。。