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

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

一、效果、demo、下載地址

• 國(guó)內(nèi)：
  演示地址：https://www.zhangxinxu.com/study/201007/pie-ie-css3-demo.html （感謝大佬：張?chǎng)涡?#xff09;
• 國(guó)外：
  官網(wǎng)以及演示地址： 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; /*一定要加，否則不顯示。注意：父類也要添加相同屬性，否則會(huì)錯(cuò)位，下面會(huì)詳細(xì)介紹*/ border-radius: 15px; /*這個(gè)不能刪，雖然IE8不支持這個(gè)屬性，但是PIE.htc會(huì)用到*/-webkit-border-radius: 15px; /*以下這兩個(gè)是PIE.htc設(shè)置圓角的屬性*/-moz-border-radius: 15px;behavior: url('/theme/css/zzjg/PIE.htc'); /*路徑要寫絕對(duì)路徑*/ }

在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);

這里不做詳細(xì)介紹，具體效果可以去上邊的網(wǎng)址嘗試

• 國(guó)內(nèi)：
  演示地址：https://www.zhangxinxu.com/study/201007/pie-ie-css3-demo.html （感謝大佬：張?chǎng)涡?#xff09;
• 國(guó)外：
  官網(wǎng)以及演示地址： 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);

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

三、問題

添加完代碼不顯示問題

一定要加這個(gè)屬性

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

滾動(dòng)，背景圖標(biāo)與文字錯(cuò)位問題
效果：

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

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

四、其他從網(wǎng)上找的總結(jié)

這些轉(zhuǎn)自https://blog.csdn.net/clh604/article/details/11475783

z-index相關(guān)問題
IE下這些CSS3效果實(shí)現(xiàn)是借助于VML，由VML繪制圓角或是投影效果的容器元素，然后這個(gè)容器元素作為目標(biāo)元素的后兄弟節(jié)點(diǎn)插入，如果目標(biāo)元素position:absolute 或是 position:relative，則這個(gè)css3-container元素將會(huì)設(shè)置與之一樣的z-index值，在DOM tree中，同級(jí)的元素總是后面的覆蓋前面的，所以這樣就實(shí)現(xiàn)了覆蓋，又避免了可能有其他元素正好插入其中。

所以，問題來了，如果目前元素的position屬性為static，也就是默認(rèn)屬性，則z-index屬性是沒有用的，無覆蓋可言，所以此時(shí)IE瀏覽器下CSS3的渲染是不會(huì)成功的。要解決也很簡(jiǎn)單，設(shè)置目標(biāo)元素position:relative或是設(shè)置祖先元素position:relative并賦予一個(gè)z-index值（不可為-1）。

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。