CSS3 PIE - 讓 IE 支援 CSS3 的圓角、陰影、漸層等變化

CSS3 的特性讓開發者都很方便, 可以省去很多沒用的 HTML, 也可以省掉不少切圖的工.

問題是, 現在最多人使用的瀏覽器(IE6~IE8)都還不支援 CSS3. 詳見: CSS Compatibility and Internet Explorer

註: IE8 部份支援 CSS3

JavaScript Hack IE Support CSS3

所以就有人用 JavaScript 寫了不少 Hack, 來讓 IE 支援 CSS3 的語法, 如下述:

在此就只針對 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 懶人法

  1. 觀看此頁: CSS3 PIE Demo
  2. wget http://css3pie.com/PIE.htc
  3. 點 Show CSS, 可以查看 CSS 語法, 可以跳過此步驟, 直接使用下述的 HTML + CSS 即可.
  4. 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>

  5. 再用瀏覽器開啟 index.html 即可看到 圓角 + 漸層 + 陰影 的區塊囉~ (若以後 IE 退時後, 可將 PIE.htc 移除, 不會有影響)

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

在〈CSS3 PIE - 讓 IE 支援 CSS3 的圓角、陰影、漸層等變化〉中有 4 則留言

  1. 奇怪.. 如果是單純HTML網頁載入PIE，在IE內正常顯示圓角，
    但是如果是採用PHP方式，則PIE會無作用，
    例如將 index.html 改成 index.php後執行，PIE無作用，
    我是在Local端的桌機安裝Appserv 測試，試著到Apache2.2 下的conf內，
    將 text/x-componen htc 加入到mime.types 內，重啟Apach，
    但是還是一樣

    回覆

  2. 更正..
    應該是IE8直接開啟index.html檔案，會提示要不要執行指令檔，確定執行後，圓角可以正常顯示，但是如果用WEB的方式讀取，http://127.0.0.1/testcss/index.html，則圓角不顯現，HTML內容則是COPY自上面你的Sample

    我將PIE.htc與index.html上傳到虛擬主機，用IE8瀏覽先出現方塊後，隨即出現圓角，應該是要等到PIE.htc完全讀取後才能顯示，不知道主機那邊要設定什麼，才能支援htc的讀取，謝謝

    回覆

  3. 我在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了

    回覆

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。