IE中的CSS3不完全兼容解決方案

2016-12-05 2195 0 編輯:網站程序員永勝 來源:紅黑聯盟

到Internet Explorer 8為止,IE系列是不支持CSS3的。在IE中要做一些常用的效果如圓角、陰影,就需要用一些冗余而無意義的元素和圖片來做出這些效果。在厭倦這些后,就 想著用更為簡潔、直接有效、CSS3式的辦法來解決這些問題。好在就算是飽受批評的Internet Explorer,其本身也是足夠強大的。IE特有的技術可以很好的實現一些CSS3的效果。


Opacity透明度

元素的透明度在IE中可以很方便的用濾鏡來實現。

background-color:green;

opacity: .4;

filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

這里半透明區域

opacity: .4;

filter:alpha(opacity=40);

border-radius圓角/Box Shadow盒陰影/Text Shadow文字陰影

在IE中可以利用Vector Markup Language (VML)和javascript來實現這些效果,參見IE-CSS3,在引用了一個HTC文件后,在IE瀏覽器中就可以使用這三種CSS3屬性了。

-moz-border-radius: 15px; 

-webkit-border-radius: 15px; 

border-radius: 15px; 

-moz-box-shadow: 5px 5px 5px #000; 

-webkit-box-shadow: 5px 5px 5px #000; 

box-shadow: 5px 5px 50px #000; 

behavior: url(ie-css3.htc); 

實際上,在IE中有濾鏡來實現陰影(shadow)和投影(drop-shadow)效果的

shadow會產生連續、漸變的陰影

filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=10);

drop-shadow產生的陰影沒有明暗變化

filter:progid:DXImageTransform.Microsoft.DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1");

濾鏡似乎和現有的htc腳本有沖突,或者可以稱之為特性:兩者同時在一個元素上啟用的時候,濾鏡效果會轉移到其子元素上


Gradients漸變

IE中提供了一個簡單的漸變濾鏡

background-image: -moz-linear-gradient(top, #444444, #999999); 

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); 

filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); 


RGBA透明度顏色背景

漸變濾鏡支持RGBA的顏色,startColorStr和EndColorStr的前兩位是Alpha通道值。使用帶alpha通道來模擬RGBA顏色背景的同時,應該去掉其background-color屬性。

background-color: rgba(0, 255, 0, 0.6); 

filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#9900FF00',EndColorStr='#9900FF00'); 

Multiple Backgrounds多重背景圖片。

支持CSS3多重背景圖片的瀏覽器中可以用下面的語句來實現背景多重圖片:

background: url(bg-image-1.gif) center center no-repeat, url(bg-image-2.gif) top left;

要在IE中實現多背景圖片,在需要在單獨的IE hack樣式表中加入下面的代碼:

background: transparent url(bg-image-1.gif) top left repeat;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='bg-image-2.gif', sizingMethod='crop'); 

CSS3瀏覽器的多重背景

IE的多重背景

Tranformations/rotate旋轉元素

IE中有兩個濾鏡可以實現元素的旋轉,BasicImage和Matrix,前者簡單方便但是只能做90*n(n∈{1,2,3,4})度的旋轉;Matrix濾鏡功能強大,但是參數復雜。

-moz-transform: rotate(180deg);  

-o-transform: rotate(180deg);  

-webkit-transform: rotate(180deg);        

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-1,M12=-1.2246063538223772e-16, M21=1.2246063538223772e-16, M22=-1);

瀏覽器標準

@font-face服務器端字體

考慮到漢字字體的尺寸,這個CSS3的特性不算實用

font-family:'webFont';

src:url('myfont.eot');

src:local('fontname'),

url('myfont.woff') format('woff'),

url('myfont.ttf') format('truetype');

字體聲明并引用了以后,可以在網頁的其他地方用font-family使用這一字體。

可以在同一個元素上啟用多個濾鏡,如:

filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=5)progid:DXImageTransform.Microsoft.Alpha(opacity=40);

雖然一些用濾鏡模仿CSS3的效果難稱完美,但在一些情況下,運用這些技術能夠讓我們的代碼更為簡潔和統一。

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾