做全兼容的ie6圓角和透明圖片 2

我今天寫了一個關於圓角的帖子，後來覺得寫的實在是不咋地。方法也很繁瑣落後，有人推薦了我一個工具叫做piecss，於是嘗試着去用。

 

piecss這個插件是針對於ie瀏覽器不支持css3而做的。他可以讓ie也實現css3的某些特性，比如陰影，圓角等。現在我們就來說一下圓角。

 

下載piecss（本頁面提供下載）。

加到網站目錄下。

 

然後在需要用到圓角的地方，寫如下代碼

 

 

.xo-blocktitle {
    height: 35px;
    background: url("../img/content_bar.png") repeat-y;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    behavior: url(/shbank/include/me/piecss/PIE.php);
}

 

這裏的behavior的路徑我這裏是絕對路徑，因爲behavior的路徑比較特別，保險我就寫了絕對路徑。這裏的PIE.php會把PIE.htc返回來。

 

-moz-border-radius還有-webkit-border-radius是針對ff和opera的吧。這個不談。

這樣子簡簡單單，效果就出來了，爽爆了。

 

接下來就是透明png圖片的問題。我這裏用濾鏡的方法。

 

         .xo-blocktitle h3{
        	background-image:url(img/btitle_1.png) !important;
			background-image:none;
			background-repeat:no-repeat;
         	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/btitle_1.png);
			}

 如果不在濾鏡前加_，就會出現ff下無法正常顯示的問題。所以用hack。而如果不用!important直接指定background-image（爲了ff能顯示背景），那麼ie6下png圖片又是不能正常顯示，所以只能這麼寫了。聰明的讀者應該能琢磨出來的。