讓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。
它的使用方法是:下載它並放到你的伺服器目錄
在你的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( 'Content-type: text/x-component' ); include( 'pie.htc' ); ?>
透過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中文網其他相關文章!