因為在實習公司要求兼容IE6+，所以將IE6相關的樣式兼容問題列出，及解決方案。
1.讓頁面變丑的透明背景圖片問題：
HTML都為以下代碼：
<div class="img-png"></div>
一般情況下使用png格式圖片作為背景圖片CSS部分：
1.img-png{ 2 width:64px; 3 height:64px; 4 background: url("imgsss/day.png") no-repeat; 5}
效果圖：
chrome下： IE6下：
IE6下是不是很丑，帶一個灰色的底色。面對這種問題，解決方案是：針對IE6，使用 png8格式的圖片來做背景圖片，在IE6效果如下：
終於沒那么丑了，但是最好分開寫，只在IE6時使用png8,因為png8色彩度等很低，會影響圖片質量。分開的寫法如下：
1 .img-png{ 2 width:64px; 3 height:64px; 4 background: url("imgsss/day.png") no-repeat;/*IE6自動跳過*/ 5 _background:url("imgsss/day-png8.png");/*顯示此樣式*/ 6 }
2.讓帶有透明度背景顏色消失的問題：
HTML部分同上一條；
一般寫法的情況下的CSS部分：
1 body{background: blue;} 2 .img-png{ 3 width:64px; 4 height:64px; 5 background-color: #000; 6 opacity: 0.5; 7 }
chrome下： IE6下：
是不是看完整個人都不好了，變成一塊黑了，對於此現象解決方法是：（運行效果跟chrome相同啦~）
.img-png{ width:64px; height:64px; background-color: #000; opacity: 0.5; filter: alpha(opacity=70);/*增加此方法*/ }
3.IE6怪異解析將padding與border算入寬高：
看看你的HTML第一行是不是沒有寫文檔申明！
因為沒加入文檔聲明<!doctype html> ，所以造成非盒模型解析的原因，加入就好了。
4.當塊元素左右浮動，設定margin時造成雙倍邊距：
使元素變成行內元素：display：inline
5.內部盒模型超出父級，父級被撐大：
在父級元素內使用overflow：hidden，隱藏超出內容
6.img作為塊元素時，底邊多出空白，並且帶有藍色的邊框：
對於多出邊框(3種方法）：
a.讓父級設置 overflow：hidden;
b.設置 img{display:block;}
c.設置 _margin:-5px;
對於圖片帶有藍邊的問題：
設置 img{border:none;}
7.li間有間距(3種方法）：
a.設置float:left;
b.設置display:inline;
c.給li中文本末尾添加一個空格
8.塊級元素中含有 文字和帶有右浮動的元素，右浮動的行內元素自動換行：
HTML部分：
<h3>我是個標題<a href="" style="float:right">更多>></a></h3>
CSS部分：
body{background: yellow;width: 30%;margin: 0 auto;color: #444444;}
chrome下：
IE6下：
解決方案，將你想要右浮動的行內元素放在文字的前面，就變成跟chrome一樣想要的效果了：
<h3><a href="" style="float:right">更多>></a>我是個標題</h3>
9.設置position屬性時，left、top發生錯位：
為想要作為參照的父級（position：relative;)，設置寬高或者添加 *zoom：1;
10.子級中設有position屬性，導致父級overflow失效：
為父級設置 position：relative;
11.圓角問題：
使用圓角圖片定位到邊框（不然就放棄在IE6的圓角效果，不影響功能）
12.IE6背景閃爍
將鏈接、按鈕用CSS sprites作為背景，鼠標觸碰會發生閃爍的情況，因為IE6沒有將圖片緩存，每次觸碰都會重新加載，解決方法（2種）：
a.不使用雪碧圖
b.用JavaScript設置IE6緩存這些圖片：
document.execCommand("BackgroundImageCache",false,true);
13.IE6調整窗口大小時，body居中，body里的相對定位元素固定不動：
給body設置 position：relative;即可
大部分解決方案都親測有效 ，會隨着遇到的更多問題來繼續添加。
so 未完待續~