做全兼容的ie6圆角和透明图片

我今天写了一个关于圆角的帖子，后来觉得写的实在是不咋地。方法也很繁琐落后，有人推荐了我一个工具叫做piecss，于是尝试着去用。

piecss这个插件是针对于ie浏览器不支持css3而做的。他可以让ie也实现css3的某些特性，比如阴影，圆角等。现在我们就来说一下圆角。

下载piecss（本页面提供下载）。
加到网站目录下。

然后在需要用到圆角的地方，写如下代码


Html代码

1. .xo-blocktitle {   
   
2.     height: 35px;   
   
3.     background: url("../img/content_bar.png") repeat-y;   
   
4.     -moz-border-radius: 10px 10px 0 0;   
   
5.     -webkit-border-radius: 10px 10px 0 0;   
   
6.     border-radius: 10px 10px 0 0;   
   
7.     behavior: url(/shbank/include/me/piecss/PIE.php);   
   
8. }  
   
9. 
   
10. .xo-blocktitle {
    
11.     height: 35px;
    
12.     background: url("../img/content_bar.png") repeat-y;
    
13.     -moz-border-radius: 10px 10px 0 0;
    
14.     -webkit-border-radius: 10px 10px 0 0;
    
15.     border-radius: 10px 10px 0 0;
    
16.     behavior: url(/shbank/include/me/piecss/PIE.php);
    
17. }  

复制代码

这里的behavior的路径我这里是绝对路径，因为behavior的路径比较特别，保险我就写了绝对路径。这里的PIE.php会把PIE.htc返回来。

-moz-border-radius还有-webkit-border-radius是针对ff和opera的吧。这个不谈。
这样子简简单单，效果就出来了，爽爆了。

接下来就是透明png图片的问题。我这里用滤镜的方法。

Html代码

1.       .xo-blocktitle h3{   
   
2.         background-image:url(img/btitle_1.png) !important;   
   
3. background-image:none;   
   
4. background-repeat:no-repeat;   
   
5.         _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/btitle_1.png);   
   
6. }  
   
7. 
   
8.          .xo-blocktitle h3{
   
9.                 background-image:url(img/btitle_1.png) !important;
   
10.                         background-image:none;
    
11.                         background-repeat:no-repeat;
    
12.                  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/btitle_1.png);
    
13.                         }

复制代码

如果不在滤镜前加_，就会出现ff下无法正常显示的问题。所以用hack。而如果不用!important直接指定background-image（为了ff能显示背景），那么ie6下png图片又是不能正常显示，所以只能这么写了。聪明的读者应该能琢磨出来的。

推荐链接
年薪100万诚邀IT讲师
【推荐】java 新手是如何获得“8K月薪”的？

今天没事来逛逛