CSS中轻松实现Firefox与IE透明度-css浏览器兼容

你对CSS中实现Firefox与IE透明度的概念是否了解，这里和大家分享几种实现Firefox与IE透明度的方法，希望对你的学习有所帮助。

CSS中实现Firefox与IE透明度(opacity)的不同方法

Dreamweaver提供的透明度样式只能支持IE,想要在Firefox下实现，需要自己手写。如下：

1.IE6设置透明度

CSS设置

filter:alpha(opacity=50);

javascript设置

IESpanJs.style.filter=“alpha(opacity=50)”;

2.Firefox3.5设置透明度

Firefox3.5支持CSS3，已经不对原来的透明度样式(-moz-opacity)提供支持（网上查的），在本人的Firefox3.5.5上测试后，发现确实如此，现在的透明度设置为：

CSS设置

opacity:0.5;

javascript设置

FirefoxSpanJs.style.mozOpacity=“0.5″;

3.Firefox3.5以前版本设置透明度

CSS设置

-moz-opacity:0.5;

javascript设置

FirefoxSpanJs.style.mozOpacity=“0.5″;

4.demo代码

<HTML>   
<HEAD>   
<style type=“text/CSS”>   
.IECSS {   
display:-moz-inline-box;   
display:inline-block;   
width:100;   
height:100;   
background-color:red;   
filter:alpha(opacity=50);   
}   
.Firefox35CSS {   
display:-moz-inline-box;   
display:inline-block;   
width:100;   
height:100;   
background-color:blue;   
opacity:0.5;   
}   
.FirefoxCSS {   
display:-moz-inline-box;   
display:inline-block;   
width:100;   
height:100;   
background-color:yellow;   
-moz-opacity:0.5;   
}   
</style>   
    
<script>   
window.onload = function() {   
//设置IE   
var IESpanJs = document.getElementById(“IESpanJs”);   
IESpanJs.style.display = “inline-block”;  //IE支持   
IESpanJs.style.width = 100;   
IESpanJs.style.height = 100;   
IESpanJs.style.backgroundColor = “red”;   
IESpanJs.style.filter=“alpha(opacity=50)”;   
    
//设置Firefox3.5.*   
var Firefox35SpanJs = document.getElementById(“Firefox35SpanJs”);   
try   
{   
Firefox35SpanJs.style.display = “-moz-inline-box”; //Firefox支持   
}   
catch (e)   
{   
Firefox35SpanJs.style.display = “inline-block”; //支持IE   
}   
    
Firefox35SpanJs.style.width = 100;   
Firefox35SpanJs.style.height = 100;   
Firefox35SpanJs.style.backgroundColor = “blue”;   
Firefox35SpanJs.style.opacity=“0.5″;   
    
//设置Firefox   
var FirefoxSpanJs = document.getElementById(“FirefoxSpanJs”);   
try   
{   
FirefoxSpanJs.style.display = “-moz-inline-box”; //Firefox支持   
}   
catch (e)   
{   
FirefoxSpanJs.style.display = “inline-block”; //支持IE   
}   
    
FirefoxSpanJs.style.width = 100;   
FirefoxSpanJs.style.height = 100;   
FirefoxSpanJs.style.backgroundColor = “yellow”;   
FirefoxSpanJs.style.mozOpacity=“0.5″;   
    
}   
</script>   
    
</HEAD>   
    
<BODY>   
<span id=“IESpanCSS” class=“IECSS”>IE_CSS</span>   
<span id=“Firefox35SpanCSS” class=“Firefox35CSS”>Firefox3.5_CSS</span>   
<span id=“FirefoxSpanCSS” class=“FirefoxCSS”>Firefox_CSS</span>   
<br>   
<br>   
<span id=“IESpanJs”>IE_Js</span>   
<span id=“Firefox35SpanJs”>Firefox3.5_Js</span>   
<span id=“FirefoxSpanJs”>Firefox_Js</span>   
</BODY>   
</HTML>

文章来源: Div-CSS.net设计网参考:http://www.div-CSS.net/div_CSS/topic/index.asp?id=10037

【编辑推荐】