想做個頁面用到css3的圓角和陰影效果，但ie瀏覽器不支持，之前也聽說有插件可以實現(xiàn)，周六在網(wǎng)上找到了一個方法，原文如下：
但凡是前端工程師，都知道IE6，IE7，IE8不支持、或者不完全支持CSS3的屬性。
CSS3 有很多很強大、絢麗的效果，比如，圓角，陰影，漸變透明，漸變背景，等等。
因為IE6時代，沒有什么標準，而因為各種原因，IE6用戶幾乎不會更新IE版本。
讓IE6，IE7，IE8支持CSS3效果，有一個思路就是利用 VML 模擬。
VML是The Vector Markup Language(矢量可標記語言)，原本是微軟自己開發(fā)的東西，很強大。
也就是說，IE下面，可以用 VML做出圓角 。半透明、陰影 、漸變背景。
早在去年的時候，就有老外這個思路寫成了插件，方便前端程序員開發(fā)。。。
它可以讓IE6，IE7，IE8 支持 CSS3特效……
之前的 bug 一直有一個嚴重 bug，今天上去看的時候，官方修正了這個Bug ，并且增加了js 渲染方法（之前是用behavior導入）。
 
看看如何調(diào)用：
1、在你的網(wǎng)頁加載 PIE.js 腳本。
注意，用IE專用的注釋，防止非IE瀏覽器下載。
復制代碼
代碼如下:
<!--[if lt IE 10]>
<script type="text/javascript" src="PIE.js"></script>
<![endif]-->
 
2、用js 調(diào)用：
$(function() {
    if (window.PIE) {
        $('.rounded').each(function() {
            PIE.attach(this);
        });
    }
});
3、已經(jīng)搞定了。
在讓 IE6支持 CSS3 的所有插件中，這個應該是最好的插件了。
 
官方實時測試例子：http://css3pie.com/
官方下載：http://css3pie.com/download-latest
 
測試了半天也不行，誰知太大意了，忽略了兩點，一是在本地預覽無效，得傳到服務(wù)器環(huán)境下，或者本地服務(wù)器環(huán)境，二是在css里忘記加behavior: url(pie.htc);造成的。今天終于測試可用了，但新的問題又來了，我用的是自適應寬度，加上后會出現(xiàn)橫向滾動條，去掉就好了，其他情況下正常，而且對文字陰影好像沒有效果，不知道大家遇到這樣的問題沒有，如想使用的朋友可以試試吧
						
						

						
						
					

最新評論