CSS3 的特性讓開發者都很方便, 可以省去很多沒用的 HTML, 也可以省掉不少切圖的工.
問題是, 現在最多人使用的瀏覽器(IE6~IE8)都還不支援 CSS3. 詳見: CSS Compatibility and Internet Explorer
註: IE8 部份支援 CSS3
JavaScript Hack IE Support CSS3
所以就有人用 JavaScript 寫了不少 Hack, 來讓 IE 支援 CSS3 的語法, 如下述:
- CSS3 PIE: CSS3 decorations for IE
- CSS3 support in Internet Explorer 6, 7, and 8
- Keith Clark - IE CSS3 pseudo-class selectors
在此就只針對 CSS3 PIE 最簡單介紹.
CSS3 PIE Source code
- CSS3 PIE 的 Source code: git clone git://github.com/lojjic/PIE.git
目前 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 官方文件
使用 CSS3 PIE 懶人法
- 觀看此頁: CSS3 PIE Demo
- wget http://css3pie.com/PIE.htc
- 點 Show CSS, 可以查看 CSS 語法, 可以跳過此步驟, 直接使用下述的 HTML + CSS 即可.
- vim index.html
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html> - 再用瀏覽器開啟 index.html 即可看到 圓角 + 漸層 + 陰影 的區塊囉~ (若以後 IE 退時後, 可將 PIE.htc 移除, 不會有影響)
奇怪.. 如果是單純HTML網頁載入PIE，在IE內正常顯示圓角，
但是如果是採用PHP方式，則PIE會無作用，
例如將 index.html 改成 index.php後執行，PIE無作用，
我是在Local端的桌機安裝Appserv 測試，試著到Apache2.2 下的conf內，
將 text/x-componen htc 加入到mime.types 內，重啟Apach，
但是還是一樣
更正..
應該是IE8直接開啟index.html檔案，會提示要不要執行指令檔，確定執行後，圓角可以正常顯示，但是如果用WEB的方式讀取，http://127.0.0.1/testcss/index.html，則圓角不顯現，HTML內容則是COPY自上面你的Sample
我將PIE.htc與index.html上傳到虛擬主機，用IE8瀏覽先出現方塊後，隨即出現圓角，應該是要等到PIE.htc完全讀取後才能顯示，不知道主機那邊要設定什麼，才能支援htc的讀取，謝謝
這跟 PHP 應該不會有關係, 看看是不是 HTML 有漏套?
我在google搜尋，看到一篇CSS的htc檔案對於腳本建立的html無效的處理方法，裡面提到htc是IE針對CSS開放的一種特殊實現方式......
另外找到一個在stackoverflow.com的標題IE.htc not working on different web server，裡面有人回答了，在CSS3 PIE網站已有解決方式，並附上連結，
http://css3pie.com/documentation/known-issues/#content-type
大致是說許多Web服務器提供正確的內容類型是預先設定的，但有些則沒有。若header不是以text/x-component送出htc，會被IE忽略，因此我又在Apach的httpd.conf裡面加了AddType text/x-component .htc，重啟Apach後，IE可以支援PIE.htc了