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

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
本篇發表於 News-Technology。將永久鏈結加入書籤。

CSS3 PIE - 讓 IE 支援 CSS3 的圓角、陰影、漸層等變化 有 4 則回應

  1. maxmas 說道:

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

  2. maxmas 說道:

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

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

  3. maxmas 說道:

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

發表迴響