482
技術社區[雲棲]
使用PIE對IE進行CSS3兼容介紹和經驗總結
國外團隊開發的兼容插件，去年做項目時才發現，非常強大主角：PIE.js , PIE.htc 兩種方法可以實現
官方網站：https://css3pie.com/
演示地址：https://css3pie.com/demos/gradient-patterns/
可以使 IE6、7、8 、9 實現類似 chrome 和 firefox
1. 更自然逼真的陰影效果，不再是以前那種醜陋的濾鏡效果。
2. 實現很自然的圓角效果
3. 實現部分 CSS3 的強悍效果，如 多背景圖，border-image，更強的背景漸變效果。
4. png 圖片透明效果
上個演示截圖先：
非常強大哦，基本上現在就隻用這個插件就可以搞定很多兼容問題了。
下麵簡單說下使用方法：
1. .htc 大概是瀏覽器補丁模式
css 中使用 behavior 來加載即可自動實現效果，
#test {
border-radius: 3px;
behavior: url(/PIE.htc);
}
注意路徑，最好是直接使用 URL 的絕對路徑，
如果無法顯示可能是 服務器端不支持該類型文件格式的解析，可以在服務器配置文件的
mime.types文件的末尾增加一行：text/x-component htc，具體方式請自己 google 下吧
方法一的總結，我自己最早使用的也就是這個方法，發現時靈時不靈的，很鬱悶了好久，而且每個地方都要寫，超級麻煩，最後差點都放棄這個插件了，後來發現了方法二。
2. .js 方式，很靈活，簡單
下載並解壓縮 https://css3pie.com/download-latest
使用 PIE.js 文件
<script type="text/javascript" src="/PIE.js"></script>
<script type="text/javascript">
PIE.attach(document.getElementById("test"));
</script>
最好放在 body 的最下麵，這樣將其包含到 html 頁麵後既可以使用
另外推薦配合 jQuery 使用更方便
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/PIE.js"></script>
<script type="text/javascript">
(function($){
$.pie = function(name, v){
// 如果沒有加載 PIE 則直接終止
if (! PIE) return false;
// 是否 jQuery 對象或者選擇器名稱
var obj = typeof name == 'object' ? name : $(name);
// 指定運行插件的 IE 瀏覽器版本
var version = 9;
// 未指定則默認使用 ie10 以下全兼容模式
if (typeof v != 'number' && v < 9) {
version = v;
}
// 可對指定的多個 jQuery 對象進行樣式兼容
if ($.browser.msie && obj.size() > 0) {
if ($.browser.version*1 <= version*1) {
obj.each(function(){
PIE.attach(this);
});
}
}
}
})(jQuery);
$(function(){
$.pie('.for-ie6', 6);
var objs = $('.for-ie, .test, .test1, .test2 .test3, #test4');
$.pie(objs, 9);
});
</script>
差不多先就這樣了吧，具體的請參考官網上的代碼示例
最後說一下，根據我的經驗，
1. 使用圓角，陰影時，最好給其定義下樣式 position:relative; 否則可能遇到莫名其妙的層高問題導致生成的兼容樣式層看不到了；
2. 使用png透明圖片做背景時，如果沒有其它圓角、陰影等樣式，IE6下貌似是不會自動實現透明的，可以試試 -pie-background:url(); 的方式 或者添加一個 border-radius:0.5px; 樣式既可以實現背景透明
3. IE6 下 使用背景圖片透明時，盡量不要是用 css sprtes 方法，將很多圖片放一張圖，否則在兼容渲染的時候效率會非常差，因為圖片太大啦，盡量 IE6 使用單獨的png圖片進行透明渲染
4. 使用陰影時，如果有設置漸變透明可能會導致一片黑，目前解決辦法可以試試 使用半透明的 png 圖片做背景試試，這個我還沒測試過，調整 opacity 透明度 濾鏡貌似也不成功，算是完美中的不足吧。
5. 應該是不支持內陰影效果的，沒弄出來過，好遺憾
------------------------------------------------------------------------------------------------------------------------------------------------------------
08.23 補充：透明的方法，
直接對執行過PIE兼容的當前容器進行透明度是沒有用的，因為JS會新生成一個自定義標簽層疊在下麵，可以用下麵的步驟實現透明
1. CSS 添加
css3-container { filter:alpha(opacity=98); }
2. JS 添加
$('.test').prev('css3-container').css({'filter':'alpha(opacity=98)', 'opacity':0.98});
最後更新：2017-04-03 12:54:57