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 添加到仅在 LTE IE8 中的 inputs 中，通过第二个样式表或在同一文档中添加 \9 声明。

background: none\9; 针对 IE8 及以下版本，就像针对 IE7 及以下版本的通配符 hack (*background: none;) 或下划线 hack (_background: none;) 针对 IE6 及以下版本。但是，您应该只需要使用第一个。