讓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;