使用PIE.htc讓萬惡的IE內核瀏覽器IE6\7\8支持CSS3部分屬性

萬惡的IE內核瀏覽器，這是多少前端程序員頭疼的事情。。。
今天給大家介紹一下如何用 PIE.htc 來讓IE瀏覽器支持CSS3的

border-radius、box-shadow、CSS3 Backgrounds (-pie-background)、Gradients、RGBA屬性。

會的朋友提供一下建議，不會的朋友學習一下。

下載地址：PIE.htc
官方網站：http://css3pie.com/
演示地址：http://css3pie.com/demos/gradient-patterns/

要使用 PIE 應用就要先把它引進來，這里不是在 html 文件里面引入，而是在 css 文件里面使用 behavior 來對文件進行導入。這里會涉及到一個路徑的問題。比如 當前文件在“/”下 ，CSS文件在“/CSS”下，PIE.htc在“/CSS”下，behavior: url(/css/PIE.htc)而不是behavior: url(PIE.htc) 。

ps ：PIE.htc URL路徑是相對於當前HTML文件，不是CSS文件.

以下代碼都是基於下面這段公共的樣式進行編寫：

div{text-align: center;border: 1px solid #204D74;width: 200px;height: 100px;line-height: 100px;}

 

1. border-radius 圓角

.borderRadius{
         border-radius: 10px;
         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         background: #ABCDEF;
         behavior: url(css/PIE.htc);
}

ps ：不支持單邊的圓角屬性，比如： border-top-left-radius，但是你可以這樣來寫：

.borderRadius{
         border-radius: 0px 20px 0px 20px;
         -webkit-border-radius: 0px 20px 0px 20px;
         -moz-border-radius: 0px 20px 0px 20px;
         background: #ABCDEF;
         behavior: url(css/PIE.htc);
}

 

 

2 . box-shadow 盒子陰影

.boxShadow{
         box-shadow: 10px 10px 10px #000;
         -webkit-box-shadow: 10px 10px 10px #000;
         background: #ABCDEF;
         behavior: url(css/PIE.htc);
}

 

 

3 . CSS3 Backgrounds 背景漸變

.linearGradient{
         background: -webkit-gradient(linear, 0 0, 0 100%, from(#0000FF) to(#ABCDEF)); /*old webkit*/
         background: -webkit-linear-gradient(#0000FF, #ABCDEF); /*new webkit*/
         background: -moz-linear-gradient(#0000FF, #ABCDEF); /*gecko*/
         background: -ms-linear-gradient(#0000FF, #ABCDEF); /*IE10*/
         background: -o-linear-gradient(#0000FF, #ABCDEF); /*opera 11.10+*/
         background: linear-gradient(#0000FF, #ABCDEF); /*future CSS3 browsers*/
         -pie-background: linear-gradient(#0000FF, #ABCDEF); /*PIE*/
         behavior: url(css/PIE.htc);
}

ps ：只支持linear-gradient（線性漸變）

 

4 . RGBA

.rgba{
         background: rgba(0,0,0,.6);
         -pie-background: rgba(0,0,0,.6);
　　　　　 /*黑色背景，透明值為60*/
         behavior: url(css/PIE.htc);
}

ps：不支持box-shadow

 

 

5 . IE6 下的 png 圖片的透明問題

.png img{
         -pie-png-fix: true;
         behavior: url(/PIE.htc);
}
.png{
         background-image:url(img.png);
         -pie-background:url(img.png);
         behavior: url(/PIE.htc);
}

ps：圖片直接用-pie-png-fix: true，背景圖片使用-pie-background來修復IE6下png透明的問題

由於我這邊沒有IE6內核的瀏覽器，所以這個就無法測試給大家看了，要是有興趣的可以自己試試看。不過我覺得這個也沒有那么重要了，畢竟IE6基本都被舍棄了，現在很多公司最舊的版本也就兼容到IE7，再老的就變成老古董了。

 

 

6 . background-size 背景包含

.backgroundSize{
        background:#ABCDEF url(wait.png) center no-repeat;
        background-size: contain;
        /*behavior: url(css/backgroundsize.min.htc);*/
        behavior: url(css/backgroundsize.min.htc);
}

框框的寬高的是200x100，圖片的寬高是180x180，這樣圖片的高就超過了框的邊界，如果使用背景圖片就要使用到background-size來讓背景圖片被包含，但是IE9以下是不支持的。

以上的是我暫時對PIE的用法的一個理解，要是有更多的用法，請給我留言！
如有更多知識，會繼續補充！