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