使用PIE讓IE7~8支援CSS 3 屬性

以目前來說...IE就算進步到IE10，但他下面的孩子們789還是不支援，當我需要使用漸層(或CSS3其他的語法)到IE的作法時，就會碰到那不支援，這不支援的...

於是網上找了一些解決方式，以下介紹一個我用了還蠻方便的作法(當然不是我寫的=  =)
不想看的可以直接看這裡：http://css3pie.com/about/

PIE (progressive internet explorer)

目前 CSS3 PIE 的支援語法
PIE currently has full or partial support for the following CSS3 features:

border-radius: 圓角
box-shadow: 區塊陰影
border-image
multiple background images
linear-gradient as background image: 漸層顏色
詳見: About PIE
註: CSS3 PIE 是使用 .htc 的 hack 方式
使用 CSS3 PIE 官方文件
Getting Started – CSS3 PIE: CSS3 decorations for IE


如何使用：
1.下載PIE
2.將你在ie上需要css3地方加入
"-pie-background: linear-gradient(#EEFF99, #66EE33);
 behavior: url(/PIE.htc);"
例如：
.boxGradient{
  border-radius: 2px;
  /*讓IE支援漸層的語法*/
-pie-background: linear-gradient(#fff, #e1e0dd);
behavior: url(pie/PIE.htc);
}

3.執行IE觀賞美麗的CSS3漸層

-------------------------------------------------------------------------
後記：
還真的有用!!
但IE7、8、9呈現出來的感覺還是有點不一樣，7跟8比較相近，9的陰影呈現跟圓角反而怪怪，大概有1px的差距


網路上的怪招真的很多........

參考網址：
http://css3pie.com/documentation/getting-started/
http://blog.longwin.com.tw/2010/07/favorite-css3-pie-2010/

//2012/6/5 補充
ie如果使用了PIE之後呢，在包覆這個樣式的外層DIV，就不能在設定background屬性，這樣會影響PIE的背景顯示，意思就是說，如果你有依靠PIE設定div的背景色，那包覆此div的外層div就不能另外設定背景色，裡面設定PIE的div會直接吃到外層的div的 background屬性。


解決方式：在pie外層加上position:relative與z-index:1樣式即可解決(目前是用此解決，如後續遇到問題在繼續補充)
參考pie3 Known Issues http://css3pie.com/documentation/known-issues/#relative-paths

//2012/7/4 補充
ie7還是出現了一大塊底色...這邊我就真的投降了...只好寫ie hack 放棄PIE了...希望有高手解答..
環境是php，作了一個a連結的按鈕讓user滑過時出現陰影的效果...

CSS3‧漸層

CSS3的漸層語法，在各瀏覽器的語法略有不同，分別說明如下：


Chrome / Safari 4+:


/*由上到下*/
background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));


/*由左至右*/
background:-webkit-gradient(linear, left top, right top, from(#00475E), to(#007276));


/*在Chrome 10 之後語法可簡化為:*/
background:webkit-linear-gradient(top, #00475E, #007276);


Firefox 3.6+
/*由上到下*/
background:-moz-linear-gradient(top, #00475E, #007276);


/*由左至右*/
background:-moz-linear-gradient(left, #00475E, #007276);


IE6~IE8
基本語法 
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276'); 


參數說明 
上下漸層GradientType=0 
左右漸層GradientType=1 
漸層起始色彩startcolorstr=# 
漸層結束色彩endcolorstr=# 




跨瀏覽器綜合語法
body {
        /*預設背景顏色, 讓不支援漸層的瀏覽器能呈現基本底色*/
        background: #278092;
        /******跨瀏覽器的底色漸層CSS語法 (由上到下)********/ 
        /*Chrome的語法*/
        background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));
        /*FireFox的語法*/
        background: -moz-linear-gradient(top, #00475E, #007276);
        
        /*IE6~IE8的語法*/
        filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276');
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #00475E, #007276);
        margin: 0px;
}
--------------------------------------------------------------
後記：
上述語法精我實際測試後，Opera沒有安裝..= =和除了ie的效果不知道為什麼出不來外
其他皆能呈現我要的效果測試OK


引用網站：
http://mepopedia.com/forum/read.php?844,17157,17157#.E4.B8.89.E3.80.81.E8.B7.A8.E7.80.8F.E8.A6.BD.E5.99.A8.E7.B6.9C.E5.90.88.E8.AA.9E.E6.B3.95
參考資料: 
CSS Tricks: http://css-tricks.com/examples/CSS3Gradient/ 
CSS3 Maker: http://www.css3maker.com/