【引文】
CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。
【兼容性】
IE9+和目前其他主流浏览器 Opera 9.0+，Safari 1.2(WebKit 125) +，chrome等等都支持opacity这个透明度属性
【简介】
首先，Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值。opacity取值为1是完全不透明，取值为0是完全透明，视觉上看不见
关于浏览器对opacity属性的兼容性请继续往下看：
①IE9+才开始支持CSS3 opacity，而对IE6-IE8我们习惯使用filter滤镜属性来进行实现。IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
②IE8又引入了特殊的-ms-filter，IE认为这种写法是对旧写法的一次更正，更符合规范，这个写法的属性值只是多了一对引号，效果同前。不过，这种写法的寿命也不长，到IE10对filter与-ms-filter都已经不再支持。
③Safari 1.2之前的版本，是基于khtml的浏览器内核，1.2版发布后，不再支持-khtml-opacity的写法，-khtml-opacity也随之成为历史
【案例解析】
下面通过一个例子来测试filter和opacity的兼容性：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div class="transparent_class">测试透明度</div> </body> </html>
.transparent_class {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width:300px;
height:300px;
line-height:300px;
text-align:center;
background:#000;
color:#fff;
/* older safari/Chrome browsers */
-webkit-opacity: 0.5;
/* Netscape and Older than Firefox 0.9 */
-moz-opacity: 0.5;
/* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
-khtml-opacity: 0.5;
/* IE9 + etc...modern browsers */
opacity: .5;
/* IE 4-9 */
filter:alpha(opacity=50);
/*This works in IE 8 & 9 too*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*IE4-IE9*/
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
【使用事项】
①使用中，我们可以根据要适配的浏览器/版本，从上面选择自己需要的代码行。如果要全面支持所有浏览器，至少需要有关opacity或filter的前5句
②顺序：
如果你要同时使用filter和-ms-filter，请将-ms-filter写在filter的前面。原文描述如下
If you don’t use this order, IE8 emulating IE7 doesn’t apply the opacity, although IE8 and IE7 native do.
翻译为（如果你不使用这个命令，IE8模拟IE7不适用不透明，尽管IE8和IE7本地做）
.
相关推荐
本文将深入探讨如何解决IE兼容性问题，尤其是针对IE8版本的优化策略。 一、理解IE的DOCTYPE及其影响 DOCTYPE声明在HTML文档的开头，用于告知浏览器应使用哪种HTML或XHTML规范来解析页面。IE浏览器在不同的DOCTYPE...
### 如何解决IE兼容性问题 在Web开发领域，确保网站在不同版本的Internet Explorer（以下简称IE）浏览器中能够正常显示是一项重要的工作。由于IE浏览器的版本差异导致了许多兼容性问题，这使得开发者不得不采取一...
在Web开发中，浏览器兼容性一直是一个重要的问题，尤其是对于旧版本的Internet Explorer（IE），如IE6和IE7。本文主要讨论如何通过CSS Hack来解决IE、Firefox等浏览器之间的样式兼容问题。 一、CSS Hack 1. `!...
本文将深入探讨FF和IE之间的CSS兼容性问题，以及如何解决这些差异。 首先，让我们来看标题和描述中提到的问题：如何使`DIV`或`table`在IE和Firefox中水平居中。在CSS中，有多种方法可以实现这个效果，但并非所有...
在网页设计领域，Internet Explorer（简称IE）的6、7、8版本曾是开发者们面临兼容性问题的主要挑战。这三款浏览器虽然在当时占据了一定的市场份额，但它们对CSS（层叠样式表）的支持程度并不理想，导致开发者需要...
在互联网发展的早期，微软的Internet ...随着现代浏览器的普及，这些旧版本IE的兼容性问题逐渐减少，但作为历史遗留问题，对于维护旧网站或者支持老旧设备的开发者来说，理解这些版本的CSS兼容性仍是至关重要的。
2. 属性支持：例如，透明度`opacity`在IE8及以下版本需要使用滤镜`filter`属性实现；CSS3边框圆角`border-radius`、阴影`box-shadow`等在IE9以下不支持。 3. 布局模式：IE特有的盒模型`Box Model`问题，其中`width`...
解决方法：使用CSS前缀`-ms-filter`针对IE8，同时保留`opacity`属性以兼容其他浏览器。 4. **PNG透明图象** - IE6不支持PNG24位的透明效果，需要使用滤镜`filter: progid:DXImageTransform.Microsoft....
这个名为“淘宝SDK模块代码 能兼容ie6ie7ie8以及firefox的css透明滤镜”的资源，旨在解决一个核心问题：如何在不同浏览器间，特别是老旧的Internet Explorer（IE6、IE7、IE8）和Firefox上实现一致的CSS透明效果。...
在开发Web页面时，兼容性是一项重要的考虑因素，尤其是在面对历史悠久且存在诸多特性的Internet Explorer浏览器，尤其是IE8。"CSS兼容IE8代码"是指针对IE8浏览器进行优化的CSS（层叠样式表）代码，以确保在IE8中能够...
另外，IE8的opacity属性值是（1-100），高版本的是（0-1），因此在使用opacity时需要注意版本问题。 而且，IE8中的伪数组没有length属性，解决办法是使用传统的for循环遍历数组。 此外，IE8不支持trim()方法，解决...
2. **透明度支持**：IE6不支持`opacity`，可以使用滤镜（filter）属性来实现透明效果，如`filter:alpha(opacity=50)`。 3. **PNG透明图像是问题**：IE6对PNG24位透明图像的支持不佳。可以使用`AlphaImageLoader`...
综上所述，通过在CSS中同时使用opacity属性和filter属性中的alpha滤镜，再结合Gradient滤镜调整渐变效果，可以有效地解决IE6不支持opacity半透明的BUG，从而实现一个在多种浏览器中具有相兼容透明度效果的网站界面。...
7. **使用兼容库**：引入jQuery或Modernizr等JavaScript库，它们可以自动修复某些浏览器的CSS兼容性问题，如`box-sizing`、`opacity`等。 8. **渐变和透明度**：IE6-8不支持CSS渐变和透明度，可以使用图片或滤镜...
4. **透明度**：IE6不支持CSS3的`opacity`属性，但可以使用滤镜（如`filter:alpha(opacity=50)`）来实现透明效果。 5. **盒模型**：IE6对盒模型的解析与其他现代浏览器不同，需要特别处理，以确保元素尺寸计算正确...
在Internet Explorer（IE）中，为了实现类似的效果，你需要使用其特有的滤镜（filter）属性，具体形式为`filter: alpha(opacity=value)`，其中`value`是0到100之间的整数，表示元素的不透明度，100代表完全不透明，0...
为了跨浏览器兼容，可以使用渐进增强的方式，先设置`opacity:`，再为IE添加滤镜。 3. **浮动元素清除**：Firefox和IE对浮动元素的清除方式略有不同。Firefox支持`clear:both;`，而旧版IE需要`zoom:1;`和`display:...
6. **兼容性前缀**：对于一些较新的CSS特性，如`transform`、`opacity`等，可能需要加上特定浏览器的前缀，如`-webkit-`、`-moz-`、`-ms-`等，以确保在各个浏览器中都能正常工作。 7. **响应式设计**：考虑到不同...
在早期的Web开发中，IE6浏览器由于其市场份额和用户需求，经常需要特别考虑兼容性问题。"兼容IE6的遮罩层"是一个常见的技术挑战，涉及到网页元素的层叠上下文、透明度处理和CSS hack等知识点。下面将详细阐述这些...
4. CSS透明度：IE6到IE8不支持`opacity`属性，但可以通过滤镜（Filter）实现透明效果，例如`filter: alpha(opacity=50);`。然而，这种方法在性能上较差，并且不适用于背景图片。 5. 定位（Positioning）：IE6对绝对...