使用濾鏡設置透明導致 IE 6/7/8/9 解析異常的解決方法
更新時間：2011年04月07日 23:10:36 作者：
使用濾鏡設置透明導致 IE 6/7/8/9 解析異常的解決方法，需要的朋友可以參考下。
如下
<div style="width:100px;height:100px;background:gold"></div>
<div style="filter:alpha(opacity=20);width:100px;height:100px;background:gold">
</div>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>IE 6/7/8/9 中JS設置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>
IE中查看結構，效果如 圖2 ，即filter和width在一行。
注意以上html中的最后一句js代碼
d1.style.filter = 'alpha(opacity=20)';
右小括號后沒有加分號?，F(xiàn)在該句稍改下（的確是稍改，只加了個分號）
d1.style.filter = 'alpha(opacity=20);';
即在由小括號后加了個 分號 ";" 。 這時查看IE開發(fā)者工具如 圖3 ：
復制代碼 代碼如下:
<div style="width:100px;height:100px;background:gold"></div>
用IE開發(fā)者工具，或IE8自帶的開發(fā)者工具。結構如 圖1 ：
紅色所圈之處可以看到給div添加的內聯(lián)樣式width，height，background都依次排列。正常！
但給該div添加filter:alpha(opacity=20)后，
復制代碼 代碼如下:
<div style="filter:alpha(opacity=20);width:100px;height:100px;background:gold">
</div>
情況發(fā)生了變化，如 圖2 ：
紅色所圈之處看到，width和filter擠在一行上了。正常的情況width應該另起一行。
有人也許會說這只是開發(fā)者工具沒有正確顯示，只要不影響頁面元素正確渲染即可。
的確，在IE6/7/8/9 中該元素寬度、高度、背景色及透明度都能按設置所期望的渲染，顯示。如圖：
此外，將樣式寫在style標簽內或css文件中也會出現(xiàn)以上現(xiàn)象。
再看下JS設置filter，情況稍有不同。代碼如下：
復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>IE 6/7/8/9 中JS設置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>
IE中查看結構，效果如 圖2 ，即filter和width在一行。
注意以上html中的最后一句js代碼
復制代碼 代碼如下:
d1.style.filter = 'alpha(opacity=20)';
右小括號后沒有加分號?，F(xiàn)在該句稍改下（的確是稍改，只加了個分號）
復制代碼 代碼如下:
d1.style.filter = 'alpha(opacity=20);';
即在由小括號后加了個 分號 ";" 。 這時查看IE開發(fā)者工具如 圖3 ：
紅色所圈之處看到四個css屬性background、filter、height和width單獨在一行顯示。而沒有像 圖2 中filter和width在一行顯示。
PS:很多流行JS庫設置透明的方法沒有加 alpha(opacity=20)后的分號。
相關文章
本文主要介紹了使用javascript來控制背景圖片的顯示和隱藏，當點擊關閉按鈕時，控制CSS使頁面不加載背景圖，同時記錄COOKIE相關參數(shù)，并設置cookie的有效期2014-02-02
今天小編就為大家分享一篇layui 表單標簽的校驗方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript 手動實現(xiàn)instanceof的方法
instanceof運算符用于檢測構造函數(shù)的prototype屬性是否出現(xiàn)在某個實例對象的原型鏈上，本文重點給大家介紹JavaScript手動實現(xiàn)instanceof的問題，感興趣的朋友跟隨小編一起看看吧2021-10-10
JavaScript中Infinity(無窮數(shù))的使用和注意事項
Infinity(無窮大)在 JS 中是一個特殊的數(shù)字,它的特性是它比任何有限的數(shù)字都大,如果不知道 Infinity,我們在一些運算操作遇到時,就會覺得很有意思,下面這篇文章主要給大家介紹了關于JavaScript中Infinity(無窮數(shù))的使用和注意事項,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了淺談使用MVC模式進行JavaScript程序開發(fā),同時也介紹了一些JavaScript的MVC框架,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細介紹了原生JS生成指定位數(shù)的驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了Mint-UI時間組件起始時間問題的解決方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了URL中“#” “？” &“”號的作用淺析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
水仙花數(shù)是指一個 n 位數(shù) ( n≥3 )，它的每個位上的數(shù)字的 n 次冪之和等于它本身。下面通過本文給大家分享JS判斷一個數(shù)是否是水仙花數(shù)，需要的朋友參考下吧2017-06-06
微信小程序基于slider組件動態(tài)修改標簽透明度的方法示例
這篇文章主要介紹了微信小程序基于slider組件動態(tài)修改標簽透明度的方法,可通過slider組件拖動實現(xiàn)圖片透明度的改變功能,涉及微信小程序事件綁定、base64格式圖片載入及slider組件使用技巧,需要的朋友可以參考下2017-12-12