使用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滑過時出現陰影的效果...