使用濾鏡設(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)該另起一行。
有人也許會說這只是開發(fā)者工具沒有正確顯示,只要不影響頁面元素正確渲染即可。
的確,在IE6/7/8/9 中該元素寬度、高度、背景色及透明度都能按設(shè)置所期望的渲染,顯示。如圖:
此外,將樣式寫在style標(biāo)簽內(nèi)或css文件中也會出現(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)';
右小括號后沒有加分號。現(xiàn)在該句稍改下(的確是稍改,只加了個分號)
d1.style.filter = 'alpha(opacity=20);';
即在由小括號后加了個 分號 ";" 。 這時查看IE開發(fā)者工具如 圖3 :
紅色所圈之處看到四個css屬性background、filter、height和width單獨在一行顯示。而沒有像 圖2 中filter和width在一行顯示。
PS:很多流行JS庫設(shè)置透明的方法沒有加 alpha(opacity=20)后的分號。
相關(guān)文章
JavaScript 手動實現(xiàn)instanceof的方法
instanceof運算符用于檢測構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個實例對象的原型鏈上,本文重點給大家介紹JavaScript手動實現(xiàn)instanceof的問題,感興趣的朋友跟隨小編一起看看吧2021-10-10JavaScript中Infinity(無窮數(shù))的使用和注意事項
Infinity(無窮大)在 JS 中是一個特殊的數(shù)字,它的特性是它比任何有限的數(shù)字都大,如果不知道 Infinity,我們在一些運算操作遇到時,就會覺得很有意思,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Infinity(無窮數(shù))的使用和注意事項,需要的朋友可以參考下2022-04-04微信小程序基于slider組件動態(tài)修改標(biāo)簽透明度的方法示例
這篇文章主要介紹了微信小程序基于slider組件動態(tài)修改標(biāo)簽透明度的方法,可通過slider組件拖動實現(xiàn)圖片透明度的改變功能,涉及微信小程序事件綁定、base64格式圖片載入及slider組件使用技巧,需要的朋友可以參考下2017-12-12