使用濾鏡設(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 手動(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-10JavaScript中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-11Mint-UI時(shí)間組件起始時(shí)間問(wèn)題及時(shí)間插件使用
這篇文章主要介紹了Mint-UI時(shí)間組件起始時(shí)間問(wèn)題的解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08微信小程序基于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