CSS透明背景在IE7-8中不起作用

Question

我正在慢慢刪除一些用於透明div的小png文件，並用CSS代碼替換它們。

此CSS代碼可在FF和IE9-10上使用，並有助於設置文本框的樣式（單擊該文本框還會更改背景，並添加紅色的1px邊框）：

#searchbars input {
    width: 130px;
    border: 1px solid #FFF;
    padding: 4px 2px 2px 10px;
    font-size: .9em;
    font-family: Helvetica, Arial, sans-serif;
    height: 16px;

    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(22, 22, 22) transparent; /* #161616 /
    /* RGBa with 0.28 opacity */
    background: rgba(22, 22, 22, 0.28);
    color: #FFF;
}

#searchbars input:active,
#searchbars input:focus {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(22, 22, 22) transparent; /* #161616 /
    /* RGBa with 0.75 opacity */
    background: rgba(22, 22, 22, 0.75); 
    border: 1px solid #ff8277;
}

這是IE7的條件樣式表：

    /* For IE 5.5 - 7*/
    #searchbars input {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#47161616, endColorstr=#47161616);
}

#searchbars input:active, #searchbars input:focus {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf161616, endColorstr=#bf161616);
}

IE8條件表：

    /* For IE 8*/
   #searchbars input {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#47161616, endColorstr=#47161616)";
}

#searchbars input:active, #searchbars input:focus {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf161616, endColorstr=#bf161616)";
}

我使用IE10開發人員工具，並嘗試使用IE7-8-9引擎呈現頁面。

IE9 / 10 / Firefox->一切正常

IE8->默認背景，當您單擊文本框（ input:focus ）時，背景變化不是預期的。 即使alpha十六進制值正確，似乎也沒有應用不透明度。

IE7->默認后台工程。 當您單擊文本框時，背景更改（ input:focus ）不起作用。 此外，單擊文本框邊框時，邊框不會變為紅色（請參見border: 1px solid #ff8277;原始工作表中的屬性）

這是一個演示頁面： http : //www.flapane.com/calcio.php

搜索框位於社交共享按鈕的右上角。

有什么提示嗎？

提前致謝

Answer 1

這里發生的是常規的background聲明會干擾filters 。

要解決此問題，請添加background: none通過第二個樣式表或在同一文檔中，但在聲明的末尾添加\\9 ，可以僅在LTE IE8中為您的inputs添加內容。

background: none\\9; 以IE8及以下版本為目標，就像以IE7及以下版本為目標的通配符hack（ *background: none; ）或以IE6及以下版本為目標的下划線hack（ _background: none; ）一樣。 但是，您只需要使用第一個即可。