使用濾鏡設(shè)置透明導(dǎo)致 IE 6/7/8/9 解析異常的解決方法

更新時(shí)間：2011年04月07日 23:10:36 作者：

使用濾鏡設(shè)置透明導(dǎo)致 IE 6/7/8/9 解析異常的解決方法，需要的朋友可以參考下。

如下

復(fù)制代碼代碼如下:

用IE開(kāi)發(fā)者工具，或IE8自帶的開(kāi)發(fā)者工具。結(jié)構(gòu)如圖1 ：

紅色所圈之處可以看到給div添加的內(nèi)聯(lián)樣式width，height，background都依次排列。正常！

但給該div添加filter:alpha(opacity=20)后，

復(fù)制代碼代碼如下:

 
<div style="filter:alpha(opacity=20);width:100px;height:100px;background:gold"> 
</div> 

情況發(fā)生了變化，如圖2 ：

紅色所圈之處看到，width和filter擠在一行上了。正常的情況width應(yīng)該另起一行。
有人也許會(huì)說(shuō)這只是開(kāi)發(fā)者工具沒(méi)有正確顯示，只要不影響頁(yè)面元素正確渲染即可。
的確，在IE6/7/8/9 中該元素寬度、高度、背景色及透明度都能按設(shè)置所期望的渲染，顯示。如圖：

此外，將樣式寫(xiě)在style標(biāo)簽內(nèi)或css文件中也會(huì)出現(xiàn)以上現(xiàn)象。

再看下JS設(shè)置filter，情況稍有不同。代碼如下：

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>IE 6/7/8/9 中JS設(shè)置filter</title> 
</head> 
<body> 
<div id="d1" style="width:100px;height:100px;background:gold"></div> 
<script type="text/javascript"> 
var d1 = document.getElementById('d1'); 
d1.style.filter = 'alpha(opacity=20)'; 
</script> 
</body> 
</html> 