如何解決IE支持CSS3的不完全兼容的額問(wèn)題

這篇文章主要講解了“如何解決IE支持CSS3的不完全兼容的額問(wèn)題”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何解決IE支持CSS3的不完全兼容的額問(wèn)題”吧！

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

Opacity透明度

元素的透明度在IE中可以很方便的用濾鏡來(lái)實(shí)現(xiàn)。

代碼如下:

background-color:green;
opacity: .4;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

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

在IE中可以利用Vector Markup Language (VML)和javascript來(lái)實(shí)現(xiàn)這些效果，，在引用了一個(gè)HTC文件后，在IE瀏覽器中就可以使用這三種CSS3屬性了。

代碼如下:

-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 、Chrome */
border-radius: 15px; /* Opera 10.5+, IE6+ 使用 IE-CSS3*/
-moz-box-shadow: 5px 5px 5px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */
box-shadow: 5px 5px 50px #000; /* Opera 10.5+，IE6+ 使用 IE-CSS3 */
behavior: url(ie-css3.htc); /*引用ie-css3.htc */

實(shí)際上，在IE中有濾鏡來(lái)實(shí)現(xiàn)陰影(shadow)和投影(drop-shadow)效果的

shadow會(huì)產(chǎn)生連續(xù)、漸變的陰影

代碼如下:

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

drop-shadow產(chǎn)生的陰影沒(méi)有明暗變化

代碼如下:

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

濾鏡似乎和現(xiàn)有的htc腳本有沖突，或者可以稱(chēng)之為特性：兩者同時(shí)在一個(gè)元素上啟用的時(shí)候，濾鏡效果會(huì)轉(zhuǎn)移到其子元素上

Gradients漸變

IE中提供了一個(gè)簡(jiǎn)單的漸變?yōu)V鏡

代碼如下:

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6+ */

在實(shí)現(xiàn)IE中的漸變很簡(jiǎn)單

RGBA透明度顏色背景

漸變?yōu)V鏡支持RGBA的顏色，startColorStr和EndColorStr的前兩位是Alpha通道值。使用帶alpha通道來(lái)模擬RGBA顏色背景的同時(shí)，應(yīng)該去掉其background-color屬性。

代碼如下:

background-color: rgba(0, 255, 0, 0.6); /* FF3+, Saf3+,Opera 10.10+, Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#9900FF00',EndColorStr='#9900FF00'); /* IE6+*/

Multiple Backgrounds多重背景圖片

支持CSS3多重背景圖片的瀏覽器中可以用下面的語(yǔ)句來(lái)實(shí)現(xiàn)背景多重圖片：

代碼如下:

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

要在IE中實(shí)現(xiàn)多背景圖片，在需要在單獨(dú)的IE hack樣式表中加入下面的代碼：

代碼如下:

background: transparent url(bg-image-1.gif) top left repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='bg-image-2.gif', sizingMethod='crop'); /* IE6+ */

CSS3瀏覽器的多重背景

IE的多重背景

Tranformations/rotate旋轉(zhuǎn)元素

IE中有兩個(gè)濾鏡可以實(shí)現(xiàn)元素的旋轉(zhuǎn)，BasicImage和Matrix，前者簡(jiǎn)單方便但是只能做90*n(n∈{1,2,3,4})度的旋轉(zhuǎn)；Matrix濾鏡功能強(qiáng)大，但是參數(shù)復(fù)雜。

代碼如下:

-moz-transform: rotate(180deg); /* FF3.5+ */
-o-transform: rotate(180deg); /* Opera 10.5 */
-webkit-transform: rotate(180deg); /* Saf3.1+, Chrome */
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);

旋轉(zhuǎn)也很簡(jiǎn)單

@font-face服務(wù)器端字體

考慮到漢字字體的尺寸，這個(gè)CSS3的特性不算實(shí)用

代碼如下:

font-family:'webFont';
src:url('myfont.eot');/*IE6+*/
src:local('fontname'),/*字體名稱(chēng)*/
url('myfont.woff') format('woff'),/*FF3.6*/
url('myfont.ttf') format('truetype');/*saf3+,chrome,FF3.5,opera10+*/

字體聲明并引用了以后，可以在網(wǎng)頁(yè)的其他地方用font-family使用這一字體。

可以在同一個(gè)元素上啟用多個(gè)濾鏡，如：

代碼如下:

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

雖然一些用濾鏡模仿CSS3的效果難稱(chēng)完美，但在一些情況下，運(yùn)用這些技術(shù)能夠讓我們的代碼更為簡(jiǎn)潔和統(tǒng)一

感謝各位的閱讀，以上就是“如何解決IE支持CSS3的不完全兼容的額問(wèn)題”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何解決IE支持CSS3的不完全兼容的額問(wèn)題這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！