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

最新推荐文章于 2025-06-30 11:51:40 发布

最新推荐文章于 2025-06-30 11:51:40 发布 · 129 阅读

文章标签：

#webkit #IE #HTC #PHP #Opera

css html 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用piecss插件使IE浏览器支持CSS3圆角效果的方法，并解决了透明PNG图片显示问题。

我今天写了一个关于圆角的帖子，后来觉得写的实在是不咋地。方法也很繁琐落后，有人推荐了我一个工具叫做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图片又是不能正常显示，所以只能这么写了。聪明的读者应该能琢磨出来的。