0

我正在慢慢删除一些用于透明 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 hex 值是正确的，似乎也没有应用不透明度。

IE7 -> 默认背景有效。单击文本框 ( input:focus) 时背景更改不起作用。此外，当您单击文本框边框时，它不会变成红色（请参阅border: 1px solid #ff8277;原始工作表中的属性）

这是一个演示页面：http ://www.flapane.com/calcio.php

搜索框位于右上角，社交分享按钮的右侧。

有什么提示吗？

提前致谢

4

1 回答 1

1

这里发生的是常规background声明干扰filters.

要修复它，请仅通过第二个样式表或在同一文档中添加background: none到您的in LTE IE8 中，但通过附加到声明中。inputs\9

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

于 2013-09-29T08:09:59.413 回答