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 - ＆gt;一切都按预期工作

IE8 - ＆gt;单击文本框（input:focus）时的默认背景和背景更改不是预期的。即使alpha十六进制值正确，似乎也没有应用不透明度。

IE7 - ＆gt;默认背景有效。单击文本框（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及以下版本的通配符黑客（*background: none;）或针对IE6及以下版本的下划线黑客（_background: none;）一样。但是，您应该只需要使用第一个。

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

1 个答案: