我正在慢慢删除一些用于透明 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
搜索框位于右上角,社交分享按钮的右侧。
有什么提示吗?
提前致谢
最佳答案
这里发生的事情是常规的 background
声明干扰了 filters
。
要修复它,请将 background: none
添加到仅在 LTE IE8 中的 inputs
中,通过第二个样式表或在同一文档中添加 \9
声明。
background: none\9;
针对 IE8 及以下版本,就像针对 IE7 及以下版本的通配符 hack (*background: none;
) 或下划线 hack (_background: none;
) 针对 IE6 及以下版本。但是,您应该只需要使用第一个。
关于CSS 透明背景在 IE7-8 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19075500/