PIE使IE支持CSS3圓角盒陰影與漸變渲染

1、PIE之簡述

在國外，CSS3的盛行與普及，探討與研究要比國內領先不知多少個身位。相比之下，國內彷佛如一潭死水，爲什麼？我以爲國內領先的前端團隊應該經過自身的影響力，帶動國內整個前端領域與時俱進。然而，能夠理解，咱們都是要養家餬口或是談情說愛的，咱們不都是聖人，有着以天下興亡爲己任的責任心與使命感，因此呢，要麼等着別人喂，要麼閉門造車。這，不說也罷。

PIE方法的使用與平時咱們使用CSS3屬性同樣，基本上沒有什麼特殊的樣式名稱，只要連接pie.htc文件便可。

1. border-radius圓角
   關於CSS3 border-radius的基本屬性，您能夠參見這裏。

CSS代碼以下：

.pie_radius{
  width:360px;
  height:200px;
  background-color:#34538b;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border-radius:8px;
  position:relative;
  behavior:url(pie.htc);
}

相應的html代碼以下：

<div class="pie_radius"></div>

1. box-shadow 盒陰影

CSS代碼以下：

.pie_box_shadow{
  width:360px;
  height:200px;
  background-color:#34538b;
  -moz-box-shadow:1px 3px 3px #666;
  -webkit-box-shadow:1px 3px 3px #666;
  box-shadow:1px 3px 3px #666;
  position:relative;
  behavior:url(pie.htc);
}

相應的HTML代碼以下：

<div class="pie_box_shadow"></div>

1. gradient漸變
   關於CSS3的漸變屬性，我在「CSS漸變之CSS3 gradient在Firefox3.6下的使用 」、「CSS gradient漸變之webkit核心瀏覽器下的使用 」、「CSS實現兼容性的漸變背景(gradient)效果」中作了至關詳細的介紹，您有興趣能夠去看看。

若是使用PIE實現IE餓漸變背景，該如何呢？須要用到一個自定義的CSS屬性，-pie-background，後面的寫法與火狐瀏覽器相似。CSS部分代碼以下：

.pie_gradient{
  width:360px;
  height:200px;
  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);
  position:relative;
  behavior:url(pie.htc);
}

相應的html代碼以下：

<div class="pie_gradient"></div>

1. multiple background images多背景
   此CSS3屬性接觸較少，還沒有詳細研究過，此處略！

4、已知的一些問題

此方法並非萬能的，也有一些侷限性和須要注意的地方。

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，可是還有一部分則有問題。例如的個人空間域名商就沒有」text/x-component」 字樣的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和pie.htc放在同一個文件夾目錄下，同時CSS中的behavior寫法應該是：

behavior: url(pie.php);

以上爲一些常見的主要的問題，固然，在複雜的頁面狀況下，還會有其餘意想不到的狀況，這裏，我只能祝您好運了！