如何讓ie支持css3

讓ie支援css3的方法：1、下載「ie-css3.htc」並放到伺服器目錄中使用；2、下載「css3 PIE.htc」文件，然後將「PIE.htc」文件上傳到網站目錄中。

本文操作環境：Windows7系統、Dell G3電腦、HTML5&&CSS3版。

方法1：使用ie-css3.htc

ie-css3.htc是一個可以讓IE瀏覽器支援部份CSS3屬性的htc文件，不只是box-shadow，它還可以讓你的IE瀏覽器支援圓角屬性border-radius和文字陰影屬性text-shadow。

它的使用方法是：下載它並放到你的伺服器目錄

在你的裡面寫入下面的程式碼:

<!--[if IE]>
<style type="text/css">img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);}
</style>
<![endif]-->

方法2：使用css3 pie外掛程式

css3 pie 是一款可以讓ie 瀏覽器支援部分css3 屬性的外掛程式。

官方網站：http://css3pie.com/

【建議學習：css影片教學】

使用方法：

第一步：下載css3 PIE.htc 檔案

第二步：將PIE.htc檔案上傳到你的網站目錄中，上傳到目錄哪裡都可以，只要你記得這個目錄。

第三步：建立html文件，寫一段css3程式碼，並引入PIE.htc，如下面這段：

#id {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}

注意：.htc 文件路徑是相對於html檔案的路徑，而不是相對於css文件。

已知的一些問題：

此方法並不是萬能的，也有一些限制和需要注意的地方。

1. z-index相關問題

IE下這些CSS3效果實作是藉助於VML，由VML繪製圓角或是投影效果的容器元素，然後這個容器元素作為目標元素的後兄弟節點插入，如果目標元素position:absolute 或是position:relative，則這個css3-container元素將會設定與之一樣的z-index值，在DOM tree中，同級的元素總是後面的覆蓋前面的，所以這樣就實現了覆蓋，又避免了可能有其他元素正好插入其中。

所以，問題來了，如果目前元素的position屬性為static，也就是預設屬性，則z-index屬性是沒有用的，無覆蓋可言，所以此時IE瀏覽器下CSS3的渲染是不會成功的。要解決也很簡單，設定目標元素position:relative或是設定祖先元素position:relative並賦予一個z-index值（不可為-1）。

2. 相當路徑的問題

IE瀏覽器的behavior 屬性是相對於HTML文件而言的，與CSS其他的屬性不一樣，不是相對於CSS文件而言的。這使得使用pie.htc檔案不怎麼方便。如果絕對路徑於根目錄，則CSS文件不方便移動；如果相對路徑與HTML文檔，則pie.htc文件在不同HTML頁見的重用性大大降低。同時，諸如border-image後面的URL屬性路徑也不好處理。

3. 縮寫的問題

使用PIE實作IE下的CSS3渲染（其他方法也是一樣），只能使用縮寫的形式，例如圓角效果，我們可以設定border-top -left-radius表示左上圓角，但PIE確實不支援這種寫法的，只能是老老實實的縮寫。

4. 提供正確的Content-Type

要想讓IE瀏覽器支援htc文件，需要一個有著"text/x-component" 字樣的content-type 頭部，否則，會忽視behavior。絕大數web伺服器提供了正確的content-type，但是還有一部分則有問題。

如果您發現在您的機子上PIE方法無效，也就是htc檔案這裡指pie.htc檔案無效，檢查您的伺服器配置，可能其需要更新到最新的content-type。例如Apache，您可以在.htaccess檔案中做如下處理：

AddType text/x-component .htc

但是，由於某些原因，您無法修改伺服器設定（例如公用主機，或是空間服務提供者提供的伺服器），您可以用一個PHP檔來間接呼叫htc檔。我只要給你看下這個PHP檔案的程式碼您就知道什麼意思了，如下：

<?php
header( &#39;Content-type: text/x-component&#39; );
include( &#39;pie.htc&#39; );
?>

透過PHP檔案來增加一個含有"text/x-component"字樣的Content-type頭，同時調用pie.htc檔。

關於上面所示的php文件，您可以狠狠地點擊這裡：pie.php(右鍵– [目標|連結另存為])，或者您可以直接新建一個php文件，把上面的兩行程式碼複製進去。或者在本文提供的原始打包資源的wrappers資料夾裡面也有此php文件，不過名稱是大寫的。

如果您使用上述php文件，您需要將pie.php和pie.htc放在同一個資料夾目錄下，同時CSS中的behavior寫法應該是：

behavior: url(pie.php);

以上是如何讓ie支持css3的詳細內容。更多資訊請關注PHP中文網其他相關文章！