2010年5月3日 星期一

讓IE系列瀏覽器也支援CSS3圓角,陰影:IE-CSS3.htc

IE, CSS3, Hack, Script

原文:ie-css3

IE-CSS3是什麼?

IE-CSS3是一段小型的Script,引入網頁的CSS之後可以使IE系列瀏覽器的使用者也看得到一些CSS3才有的新技術。ex:圓角、陰影等。


IE-CSS3是怎麼運作的?

該Script是透過VML(IE系列瀏覽器特有的向量繪圖語言)來模擬一些CSS3的效果。



如何使用?

一般我們設計可以讓FF、SA與GC等瀏覽器產生圓角效果的CSS如下:


註: FF=FireFox、SA=Safari、GC=Google Chrome
.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome *
}
若是要讓IE系列瀏覽器也可以支援這樣的效果,請再加入如下新行
.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome *

  border-radius: 15px; /* IE 6+  */
  behavior: url(ie-css3.htc); /* 使用ie-css3 */

}
註:url()中的路徑請參考自己的網站中的路徑。
效果展示:
我是示範的盒子
問題與解決辦法
使用者可以會在使用z-index屬性的時候遇到不正常顯示的問題,尤其是將一個套用了IE-CSS3的元素放在另一個之內的時候,以下有兩個方法解決:
  • 將內部的元素z-index值設定的比外圍的大。
  • 將內部的元素套用position屬性。
    ex:position:relative; position:absolute;