• Hi! I'm Lex

  • Web & App designer, UI UX Artist, and Like creative and marketing

舊版瀏覽器也能支援CSS3效果!

CSS3 PIE便是一個能夠解決上述問題的方便工具。透過JavaScript的模擬,CSS3 PIE替IE實作了包含圓角、陰影、漸層和多重背景等CSS3所支援的內容,讓舊版的IE瀏覽器也能夠像其他新的瀏覽器一般直接的讀取CSS3的程式碼,就不需要另外花費而外的時間製作圖檔了。




而要如何使用CSS3 PIE呢?首先我們必須先從官方網站上面下載原始碼,下載後解壓縮會是兩個.htc檔,其中一個是有壓縮過、一個則是沒有壓縮過的,除非是要研究裡面的程式碼細節,否則直接使用壓縮的版本即可。
接下來我們的CSS程式碼當中加入相關的CSS屬性,並且附上與這隻.htc檔的連結:

div#header {
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
behavior: url(PIE.htc);
}

前兩行-webkit和-moz開頭的分別是為了WebKit系列(Safari、Chomre)的瀏覽器和Mozilla系列(Firefox)瀏覽器所的CSS3規則,而第三條則是給CSS3 PIE所使用的。
透過這樣的指定與加入.htc檔,IE便可以自動的讀取這隻JavaScript並且顯示出正確的CSS 3效果囉!

http://css3pie.com/

原文出自 inside
http://www.inside.com.tw/2010/09/27/how-to-make-older-ie-compatible-with-css3

沒有留言

Toggle menu