欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2011年04月07日 23:10:36   作者:  
使用濾鏡設(shè)置透明導(dǎo)致 IE 6/7/8/9 解析異常的解決方法,需要的朋友可以參考下。
如下
復(fù)制代碼 代碼如下:

<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)后,

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

<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,情況稍有不同。代碼如下:

復(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>

IE中查看結(jié)構(gòu),效果如 圖2 ,即filter和width在一行。

注意以上html中的最后一句js代碼
復(fù)制代碼 代碼如下:

d1.style.filter = 'alpha(opacity=20)';

右小括號后沒有加分號。現(xiàn)在該句稍改下(的確是稍改,只加了個分號)
復(fù)制代碼 代碼如下:

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控制cookie顯示和隱藏背景圖

    使用javascript控制cookie顯示和隱藏背景圖

    本文主要介紹了使用javascript來控制背景圖片的顯示和隱藏,當(dāng)點擊關(guān)閉按鈕時,控制CSS使頁面不加載背景圖,同時記錄COOKIE相關(guān)參數(shù),并設(shè)置cookie的有效期
    2014-02-02
  • layui 表單標(biāo)簽的校驗方法

    layui 表單標(biāo)簽的校驗方法

    今天小編就為大家分享一篇layui 表單標(biāo)簽的校驗方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JavaScript 手動實現(xiàn)instanceof的方法

    JavaScript 手動實現(xiàn)instanceof的方法

    instanceof運算符用于檢測構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個實例對象的原型鏈上,本文重點給大家介紹JavaScript手動實現(xiàn)instanceof的問題,感興趣的朋友跟隨小編一起看看吧
    2021-10-10
  • JavaScript中Infinity(無窮數(shù))的使用和注意事項

    JavaScript中Infinity(無窮數(shù))的使用和注意事項

    Infinity(無窮大)在 JS 中是一個特殊的數(shù)字,它的特性是它比任何有限的數(shù)字都大,如果不知道 Infinity,我們在一些運算操作遇到時,就會覺得很有意思,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Infinity(無窮數(shù))的使用和注意事項,需要的朋友可以參考下
    2022-04-04
  • 淺談使用MVC模式進行JavaScript程序開發(fā)

    淺談使用MVC模式進行JavaScript程序開發(fā)

    這篇文章主要介紹了淺談使用MVC模式進行JavaScript程序開發(fā),同時也介紹了一些JavaScript的MVC框架,需要的朋友可以參考下
    2015-11-11
  • 原生JS生成指定位數(shù)的驗證碼

    原生JS生成指定位數(shù)的驗證碼

    這篇文章主要為大家詳細介紹了原生JS生成指定位數(shù)的驗證碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • Mint-UI時間組件起始時間問題及時間插件使用

    Mint-UI時間組件起始時間問題及時間插件使用

    這篇文章主要介紹了Mint-UI時間組件起始時間問題的解決方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-08-08
  • URL中“#” “?” &“”號的作用淺析

    URL中“#” “?” &“”號的作用淺析

    這篇文章主要介紹了URL中“#” “?” &“”號的作用淺析,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-02-02
  • JS判斷一個數(shù)是否是水仙花數(shù)

    JS判斷一個數(shù)是否是水仙花數(shù)

    水仙花數(shù)是指一個 n 位數(shù) ( n≥3 ),它的每個位上的數(shù)字的 n 次冪之和等于它本身。下面通過本文給大家分享JS判斷一個數(shù)是否是水仙花數(shù),需要的朋友參考下吧
    2017-06-06
  • 微信小程序基于slider組件動態(tài)修改標(biāo)簽透明度的方法示例

    微信小程序基于slider組件動態(tài)修改標(biāo)簽透明度的方法示例

    這篇文章主要介紹了微信小程序基于slider組件動態(tài)修改標(biāo)簽透明度的方法,可通過slider組件拖動實現(xiàn)圖片透明度的改變功能,涉及微信小程序事件綁定、base64格式圖片載入及slider組件使用技巧,需要的朋友可以參考下
    2017-12-12

最新評論