CSS透明背景无法在IE7-8中工作

我正在慢慢删除一些用于透明div的小png文件，并用CSS代码替换它们。CSS透明背景无法在IE7-8中工作

这个CSS代码工作在FF和IE9-10，它在造型文本框帮助（当你点击它，它也改变了背景并增加了一个红色的像素边框）：

#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 /火狐 - >一切正常

IE8 - >默认背景，当你点击文本框（input:focus）的背景变化是不可预期的。似乎即使阿尔法十六进制值是正确的，不透明度仍未应用。

IE7 - >默认背景有效。点击文本框（input:focus）后，背景更改不起作用。此外，当你点击它的文本框边框没有变红（见原始表单border: 1px solid #ff8277;属性）

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

搜索框是在右上角，右的社交分享按钮。

任何提示？

在此先感谢

来源

2013-09-29 flapane

这不是一个真正的答案，如果它被低估，我不会感到惊讶，但是您听说过渐进式增强吗？ –

这应该已经覆盖了浏览器的99％（根据Google Analytics统计）。 – flapane

这里发生的是，正规background声明干扰了filters。

要修复此问题，请仅在LTE IE8中将background: none添加到您的inputs，可以通过第二个样式表或在同一文档中添加\9来申明。

background: none\9;目标IE8和下面，就像通配符劈（*background: none;）靶向IE7和下面，或下划线劈（_background: none;）靶向IE6及以下。但是，您应该只需要使用第一个。

来源

2013-09-29 08:09:59

非常感谢你，似乎你找到了解决方案。不幸的是，它似乎只修复了IE8问题，而在IE7上，当我点击文本框时，背景仍然不会改变，并且边框仍然不会变红。我尝试在两个条件样式表中添加声明或直接在'<！ - [if lte IE 8]>'中添加声明，但结果相同。 – flapane

这不是很奇怪，因为IE7不支持：重点。可能会添加一个polyfill：在IE7中重点支持，但我真的认为你应该支持IE7。我的意思是，你的网站在IE7中似乎仍然可以正常工作，这只是一个小细节。 :-) –

为什么我没有检查IE7是否支持：重点？这解释了一切......再次感谢。 :) – flapane

CSS透明背景无法在IE7-8中工作

回答

相关问题