日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

使用Filters濾鏡彌補CSS3的跨瀏覽器問題以及兼容低版本IE

云知道

跨瀏覽器兼容性是網(wǎng)頁制作永恒的難題 。別看各瀏覽器廠商都努力在自己的瀏覽器中實現(xiàn)新式的css3標(biāo)準(zhǔn)特性，但都是以擴(kuò)展樣式的形式提供的，所以在未來一段時間里，樣式表里的-moz-，-webkit-，(-ms-,-o-)等等前綴將長期存在 。

另外，雖說各家有志于擴(kuò)張自己市場的瀏覽器廠商都提供了css3的新特性，但鑒于其老式版本的瀏覽器依然存在于用戶的主機(jī)上（主要是微軟旗下的ie6,7,8），除了考慮各家瀏覽器之間的兼容性外，我們還有必要向前兼容老式瀏覽器 。

這些老式瀏覽器（低版本ie）對于css3的不支持問題，真是阻礙我們邁向css3時代的一大障礙 。
不幸之幸，當(dāng)年ie在輕視w3c標(biāo)準(zhǔn)之時，自成一套的Filters濾鏡卻是具備長遠(yuǎn)眼光的 。在這些Filters濾鏡中，不少效果正是我們CSS3中目前實現(xiàn)的 。
對于Filters濾鏡，我們不建議單獨使用，只作為解決兼容性時候的一個選擇 。
下面我們將解決以下低版本瀏覽器的問題：
1. ie6下對透明png的不支持；
2. ie6,7,8下陰影(box-shadow,text-shadow)效果的不支持；
3. ie6,7,8下漸變(Gradients)效果的不支持；
4. ie6,7,8下對rgba的不支持(一般用來做半透明層) 。

1. 解決ie6對24位透明png的不支持
第一個問題非常常見，其實有兩個解決方法，
一個就是使用ie濾鏡：AlphaImageLoader


!DOCTYPE html htmlhead meta charset="utf-8" / title使用AlphaImageLoader濾鏡支持ie6的透明png/title style .pngBg{ width:160px;height:240px;background: url(//imgup01.我們.net/我們/2018-03/29/10/15222906636564_0.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://www.rkxy.com.cn/dnjc/’//imgup01.我們.net/我們/2018-03/29/10/15222906636564_0.png’,sizingMethod=’scale’); /* sizingMethod參數(shù)還可以是image,crop */ } /style /head body div class=’pngBg’ 請嘗試使用ie6 /div /body /html
ffcod = delpost.runcode24 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode24 .value = https://www.rkxy.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運行
使用這個濾鏡之后，仍然是有一些問題沒法彌補的，比如圖片的repeat等等 。
之前，我曾極力推薦過另外一個解決方法:使用VML，稱之為完美解決方案 。在這個js里已經(jīng)封裝好代碼DD_belatedPNG
但是后來發(fā)現(xiàn)，使用VML效率問題比AlphaImageLoader更甚，君當(dāng)慎之 。

2. 解決ie6,7,8下對陰影(box-shadow,text-shadow)效果的不支持
現(xiàn)在很多網(wǎng)站為求美觀采用了很多css3的樣式，其中box-shadow和text-shadow的使用率最高 。
下面我們就利用Blur和dropShadow濾鏡在ie6,7,8中實現(xiàn)這種效果：


!Doctype html html head meta charset="UTF-8" / titleBlur濾鏡模擬box-shadow,dropShadow濾鏡模擬text-shadow/title style type="text/css" body{ position:relative; color:#c00; font-family:’黑體’; font-size:20px; background:#cfc; } .shadow{ width:200px;height:100px; background:#fff; border:1px solid #ccc; } .shadow span{zoom:1;filter:progid:DXImageTransform.Microsoft.dropShadow( Color=cccccc,offX=2,offY=1,positive=true); } .ieShadow{ position:absolute;width:200px;height:100px;z-index:-1; background: #333; top:-5px;left:-5px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=’6’, MakeShadow=’true’, ShadowOpacity=’0.3’); } /style /head body div class="wrap" div class=’ieShadow’/div div class=’shadow’ span文字shadow/span /div /div /body /html
ffcod = delpost.runcode25 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode25 .value = https://www.rkxy.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運行
ie的濾鏡是必須要在觸發(fā)haslayout情況下才能生效的（ie8除外，它已經(jīng)拋棄了haslayout這個私有屬性），這就是為什么我們在那里加了個zoom:1;
另外，當(dāng)使用dropShadow濾鏡做文字陰影時，就不應(yīng)該使用background，否則陰影效果是對背景起作用了，所以我們將dropShadow濾鏡加在了span上而不是class=shadow層上 。

推薦閱讀