先從問題出發：
現象：
今天在項目中發現一個在IE9下的bug，現象是IE9下背景爲不透明，而在IE8，IE10以及firefox，chrome下都是正常的，如下圖：
IE9的效果，背景爲純白色，
IE8，IE10，firefox，chrome的透明效果
調查過程：
1.查看代碼：
css中對li標籤設置的是
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#BF494949,endColorstr=#BF494949);background-color:rgba(0, 0, 0, 0.3)
2.補習一下代碼中相關知識
(只有真正瞭解了原代碼，才能在針對原代碼做自如的修改)
filter:progid:DXImageTransform.Microsoft.gradient(enabled=bEnabled,startColorStr= ,endColorStr= )
屬性：
enabled:可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。 true | false
true: 默認值。濾鏡激活。
false:濾鏡被禁止。
startColorStr:可選項。字符串(String)。設置或檢索色彩漸變的開始顏色和透明度。
- 格式爲 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 爲十六進制正整數。
- 取值範圍爲 00 - FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍色值，AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值範圍的值將被恢復爲默認值。 取值範圍爲 #FF000000 - #FFFFFFFF 。默認值爲 #FF0000FF 。不透明藍色。
EndColorStr:可選項。字符串(String)。設置或檢索色彩漸變的結束顏色和透明度。參閱 startColorStr 屬性。默認值爲 #FF000000 。不透明黑色。
目前IE6-IE9都支持，包括IE9
background-color:rgba(0, 0, 0, 0.3)
這是css3的一個樣式，
語法:
R：紅色值。正整數 | 百分數
G：綠色值。正整數 | 百分數
B：藍色值。正整數| 百分數
A：透明度。取值0~1之間
目前IE9以及IE9以上，firefox，chrome都支持。
可以參照給文章http://www.w3cplus.com/content/css3-rgba，比較詳細。
3.問題找到了
由上面兩個知識中發現，IE9是同時支持的，這就是說爲什麼IE8和IE10都正常，然後打開F12查看
而IE8和IE10分別支持其中一個。
接着在F12中將filter的樣式去掉，發現效果是OK的；將filter勾選，然後將background-color去掉，發現透明效果不是很好，可見IE9對其支持度還不夠。
接下來就是如何修改了。
- 在html中常用的是條件註釋，如：
<!--[if IE 9.0]>
- 在js中又採用版本判斷
if(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g,"") == "MSIE9.0")
- 但現在是在css文件中去判斷，思前想後用hack判斷吧，因爲IE9支持@media all所以採用以下的方式
@media all and (min-width:0) {
li{filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#BF494949,endColorstr}
將enabled改爲false即可，這樣在IE9就可以，而IE9以上及firefox，chrome因爲不識別filter:progid，所以不做處理，從而達到兼容性。
4.額外透明的方法
- opacity：取值範圍是0-1,1代表不透明，如opacity(1);
問題：會造成不單該元素自身背景透明瞭,它的子元素會繼承opacity屬性，也會透明.
- png-8的透明圖片
問題：採用透明圖片可以實現，但IE6下會有問題，同時圖片相對js代碼以及css來說，所需要的網絡請求大，會影響頁面的速度
5.調查該問題參考的文章：
http://www.w3cplus.com/content/css3-rgba
http://www.cnblogs.com/mizzle/archive/2012/04/05/2432752.html
http://www.footya.com/?action=show&id=114
http://angeldhp.iteye.com/blog/146612