實際上是指的是一個名為pie的htc文件，即pie.htc，使用CSS的behavior行為，可以調用此文件，然后讓IE也能實現一些常見的 CSS3效果，如圓角(border-radius)，盒陰影(box-shadow)，背景漸變(gradient)，多圖片背景(multiple background images)。

下載地址：https://github.com/lojjic/PIE/downloads 支持的主要CSS3屬性： 1.border-radius圓角 CSS代碼如下： .pie_radius{ width:250px;height:250px;background-color:#34538b;-moz-border-radius:10px; ? ? ?-webkit-border-radius:10px;border-radius:10px;behavior:url(pie.htc);} html代碼如下： <div class="pie_radius"></div> 2.box-shadow 盒陰影 CSS代碼如下： .pie_box_shadow{width:250px;height:250px;background-color:#34538b;-moz-box-shadow:1px 3px 3px #666;-webkit-box-shadow:1px 3px 3px #666;box-shadow:1px 3px 3px #666;behavior:url(pie.htc);} html代碼如下： <div class="pie_box_shadow"></div> 3.gradient漸變 ? ? ? ? ?CSS代碼如下： .pie_gradient{width:250px;height:250px;background-color:#9F9;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));background:-moz-linear-gradient(#9F9, #393); ? ? ?-pie-background:linear-gradient(#9F9, #393);behavior:url(pie.htc); ?} ? ? ? ? html代碼如下： <div class="pie_gradient"></div> 4.問題說明： ? ? ? ?a.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）。 ? ? ? ? b.IE瀏覽器的behavior 屬性是相對于HTML文檔而言的，與CSS其他的屬性不一樣，不是相對于CSS文檔而言的。這使得使用pie.htc文件不怎么方變。如果絕對路徑于根目 錄，則CSS文件不方便移動；如果相對路徑與HTML文檔，則pie.htc文件在不同HTML頁面見的重用性大大降低。同時，諸如border- image后面的URL屬性路徑也不好處理。? ? ? ? ?c.使用PIE實現IE下的CSS3渲染（其他方法也是一樣），只能使用縮寫的形式，例如圓角效果，我們可以設置border-top-left-radius表示左上圓角，但是PIE確實不支持這種寫法的，只能是老老實實的縮寫。 ? ? ? ? d.?要想讓IE瀏覽器支持htc文件，需要一個有著”text/x-component” 字樣的content-type 頭部，否則，會忽視behavior。絕大數web服務器提供了正確的content-type，但是還有一部分則有問題。 ? ? ? ? e.由于某種原因，您無法修改服務器配置（例如公用主機，或是空間服務商提供的服務器），您可以用一個PHP文件來間接調用htc文件。 ? ? ? ? ? ??<?php ?header( 'Content-type: text/x-component' ); ?include( 'pie.htc' ); ??> ? ? ? ? 通過PHP文件來增加一個含有“text/x-component”字樣的Content-type頭，同時調用pie.htc文件。需要將pie.php和pie.htc放在同一個文件夾目錄下，同時CSS中的behavior寫法應該是： ? ? ? ? ? ? ? behavior: url(pie.php);

轉載于:https://www.cnblogs.com/Hcjer/p/3986442.html

總結

以上是生活随笔為你收集整理的PIE的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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