首頁  >  文章  >  web前端  >  如何讓ie支持css3

如何讓ie支持css3

藏色散人
藏色散人原創
2021-04-19 10:17:522345瀏覽

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

如何讓ie支持css3

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

方法1:使用ie-css3.htc

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

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

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

<!--[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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn