CSS 跨浏览器解决方案之一透明度

浏览器的兼容性一直是web开发人员比较头痛的地方之一，众多的浏览器让我们有时无所适从。尤其是IE系列和其他的浏览器总是不兼容，我们通常要为IE6，7书写单独的CSS文件，甚至导致了CSS Hack 这一技术的流行。

下面我来谈谈，对于一些流行的CSS效果的跨浏览器解决方案。

很多程序员都很奇怪，为什么IE就是就是不支持 opacity 这个属性呢？这个问题已经存在很长很长时间了，其实 opacity 是 CSS3 的属性，虽然IE不提供支持，但是IE可以通过专用的过滤器属性提供类似的透明度设置。

是不是很奇怪，为什么 IE 就是和别人不一样呢？

Css代码

1. #myopacity {   
   
2.     /* other browsers */   
   
3.     opacity: .4;   
   
4.     /* this works in IE6, IE7, and IE8 */   
   
5.     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);   
   
6.     /* this works in IE8 only */   
   
7.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";   
   
8. }  
   
9. 
   
10. #myopacity {
    
11.     /* other browsers */
    
12.     opacity: .4;
    
13.     /* this works in IE6, IE7, and IE8 */
    
14.     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    
15.     /* this works in IE8 only */
    
16.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
    
17. }

复制代码

实际上你只需要使用第二行，就支持所有的 IE 版本了，不过在某些场合，如果只需要给 IE8 设置透明度的话，而 IE6，7 则不需要，这种情况下，请使用第三行就好了。

在 IE 中透明度的值是 0-100 之间的整数，而在其他浏览器中则为 0-1 之间的小数。

问题点

* filter 和 -ms-filter 都是 IE 专有的 CSS 属性，它们通过不了W3C的验证的。

* 在IE中一旦设置了透明度属性，所有的子节点都会继承此透明度。

具体效果，请参考这里

路过留名。

自己知道了