如何将 RGBA 转换为旧 IE 浏览器的过滤器

Question

我有以下 CSS 代码将背景设置为具有不透明度的颜色：

    #second-menu-navi a {
        float:left;
        width:125px;
        height:40px;
        line-height: 40px;
        vertical-align: middle;
        font-size:11px;
        color:#ffffff;
        text-decoration: none;
        background: rgb(1, 55, 97);
        background: rgba(1, 55, 97, .85); /*#013761; /*url('theImages/nav_menu_85_b.png') repeat; /*#013761;*/
        margin:0 3px 0 0 !important;
        /*background-image: none !important;*/
        padding:0 !important;

        -moz-border-radius-bottomleft: 4px; 
        -webkit-border-bottom-left-radius: 4px; 
        -khtml-border-bottom-left-radius: 4px; 
        border-bottom-left-radius: 4px;

        -moz-border-radius-bottomright: 4px; 
        -webkit-border-bottom-right-radius: 4px; 
        -khtml-border-bottom-right-radius: 4px; 
        border-bottom-right-radius: 4px;

        outline:none;

        filter:filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);
        /* For IE 8*/
        -ms-filter: "filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);";
    }
#tab-1:active, #tab-1:hover {
    background-color: #155E9B;
}
#tab-2:active, #tab-2:hover {
    background-color: #159B77;
}
#tab-3:active, #tab-3:hover {
    background-color: #1E9B15;
}
#tab-4:active, #tab-4:hover {
    background-color: #356101;
}
#tab-5:active, #tab-5:hover {
    background-color: #9B2B15;
}
#tab-6:active, #tab-6:hover {
    background-color: #9B1574;
}
#tab-7:active, #tab-7:hover {
    background-color: #70159B;
}
#break-line-2 {
    width:100%;
    height:7px;
    border-top:1px solid #02233C;
    background-color:#013761;
    position: fixed;
    top: 62px;
}

HTML：

<div id="second-menu-navi" class="navi">
            <a href="" id="tab-1">Why Choose Us</a>
            <a href="" id="tab-2">Physicians</a>
            <a href="" id="tab-3">Medical Specialties</a>
            <a href="" id="tab-4">Locations</a>
            <a href="" id="tab-5">Urgent Care</a>
            <a href="" id="tab-6">Radiology</a>
            <a href="" id="tab-7">Lab</a>
        </div>
</div>

它在 FF/Chrome/IE>=10 中运行良好。

如何编辑过滤器代码以确保它在不支持 rgba() 的 IE 中显示相同的内容？

Answer 1

快速的谷歌搜索给了我这个网站，它有一个简单的转换器。输入您的 RGBA 代码，它会为您输出过滤器...

http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

使用转换器：rgba(1, 55, 97, .85)

变成这样……

{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8013761,endColorstr=#D8013761)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8013761,endColorstr=#D8013761);   /* IE6 & 7 */
      zoom: 1;
}

Answer 2

尝试将-ms-filter 行放在filter 之前，否则它不适用于IE8。有关它的一些信息，请参阅 this blog post 和 this CSSTricks comment。