css pie.htc使用心得（解決IE8以及一下不能設置圓角問題）

用css pie.htc解決IE8 不支持 border-radius 屬性問題

一、效果、demo、下載地址

• 國內：
  演示地址：https://www.zhangxinxu.com/study/201007/pie-ie-css3-demo.html （感謝大佬：張鑫旭）
• 國外：
  官網以及演示地址： http://css3pie.com/

二、PIE支持的主要CSS3屬性詳解

border-radius圓角

css代碼:

.node2 {background-color : #c0bffb;width : 289px;height : 40px;z-index : 10;border: 0px solid #b9aed9;/*以下下是要添加的PIE.htc代碼*/position:relative; /*一定要加，否則不顯示。注意：父類也要添加相同屬性，否則會錯位，下面會詳細介紹*/ border-radius: 15px; /*這個不能刪，雖然IE8不支持這個屬性，但是PIE.htc會用到*/-webkit-border-radius: 15px; /*以下這兩個是PIE.htc設置圓角的屬性*/-moz-border-radius: 15px;behavior: url('/theme/css/zzjg/PIE.htc'); /*路徑要寫絕對路徑*/ }

在IE8下效果：

box-shadow 盒陰影

css代碼：

border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px;/*以下是PIE的代碼*/ -webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px; box-shadow: #666 0px 2px 3px; background: #EEFF99; behavior: url(pie.htc);

這里不做詳細介紹，具體效果可以去上邊的網址嘗試

• 國內：
  演示地址：https://www.zhangxinxu.com/study/201007/pie-ie-css3-demo.html （感謝大佬：張鑫旭）
• 國外：
  官網以及演示地址： http://css3pie.com/

gradient漸變

css代碼：

border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px; background: #EEFF99;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33)); background: -moz-linear-gradient(#EEFF99, #66EE33); -pie-background: linear-gradient(#EEFF99, #66EE33); behavior: url(pie.htc);

依舊不做介紹，自己去嘗試。

三、問題

添加完代碼不顯示問題

一定要加這個屬性

position:relative; /*一定要加，否則不顯示，注意：父類也要添加相同屬性，否則會錯位，下面會詳細介紹*/

滾動，背景圖標與文字錯位問題
效果：

原因：
要在此方法的父類設置 position:relative; 和 z-index : 99;
具體css代碼：

/*父類*/ #chart{width : 1500px;margin : auto;margin-top : 40px;padding : 40px;/*千萬不能遺漏，否則滾動頁面，背景圖標和文字錯位*/position:relative;z-index : 99; } /* 子類 */ .otChart .node {background-color : #c6e7ca;z-index : 10;/*以下下是要添加的PIE.htc代碼*/position:relative; /*一定要加，否則不顯示，注意：父類也要添加相同屬性，否則會錯位，下面會詳細介紹*/ border-radius: 15px; /*這個不能刪，雖然IE8不支持這個屬性，但是PIE.htc會用到*/-webkit-border-radius: 15px; /*以下這兩個是PIE.htc設置圓角的屬性*/-moz-border-radius: 15px;behavior: url('/theme/css/zzjg/PIE.htc'); /*路徑要寫絕對路徑*/ }

四、其他從網上找的總結

這些轉自https://blog.csdn.net/clh604/article/details/11475783

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）。

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

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

提供正確的Content-Type
要想讓IE瀏覽器支持htc文件，需要一個有著”text/x-component” 字樣的content-type 頭部，否則，會忽視behavior。絕大數web服務器提供了正確的content-type，但是還有一部分則有問題。例如的我的空間域名商就沒有”text/x-component” 字樣的content-type，可能是出于安全的考慮。

如果您發現在您的機子上PIE方法無效，也就是htc文件這里指pie.htc文件無效，檢查您的服務器配置，可能其需要更新到最新的content-type。例如對于Apache，您可以在.htaccess文件中左如下處理

總結

以上是生活随笔為你收集整理的用css pie.htc解决IE8 不支持 border-radius 属性问题（圆角）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。