使用PIE对IE进行CSS3兼容介绍和经验总结

下面说说如何对 IE10 以下版本的浏览器进行部分 CSS3 兼容

国外团队开发的兼容插件,去年做项目时才发现,非常强大

主角:PIE.js ,  PIE.htc    两种方法可以实现

官方网站:http://css3pie.com/

演示地址:http://css3pie.com/demos/gradient-patterns/

重要功能实现:

可以使 IE6、7、8 、9 实现类似 chrome 和 firefox

1.  更自然逼真的阴影效果,不再是以前那种丑陋的滤镜效果。

2.  实现很自然的圆角效果

3.  实现部分 CSS3  的强悍效果,如 多背景图,border-image,更强的背景渐变效果。

4.  png 图片透明效果

上个演示截图先:

非常强大哦,基本上现在就只用这个插件就可以搞定很多兼容问题了。

下面简单说下使用方法:

1.  .htc 大概是浏览器补丁模式

css 中使用  behavior  来加载即可自动实现效果,

注意路径,最好是直接使用 URL 的绝对路径,

如果无法显示可能是 服务器端不支持该类型文件格式的解析,可以在服务器配置文件的

mime.types文件的末尾增加一行:text/x-component htc,具体方式请自己 google 下吧

方法一的总结,我自己最早使用的也就是这个方法,发现时灵时不灵的,很郁闷了好久,而且每个地方都要写,超级麻烦,最后差点都放弃这个插件了,后来发现了方法二。

2.  .js  方式,很灵活,简单

下载并解压缩  http://css3pie.com/download-latest

使用  PIE.js  文件

最好放在 body 的最下面,这样将其包含到 html 页面后既可以使用

另外推荐配合 jQuery 使用更方便

 

差不多先就这样了吧,具体的请参考官网上的代码示例

最后说一下,根据我的经验,

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});

关于稚子

你们眼中的草根
此条目发表在Web前台开发技术分类目录,贴了, , , 标签。将固定链接加入收藏夹。

使用PIE对IE进行CSS3兼容介绍和经验总结》有2条回应

  1. Wanan说:

    谢谢,讲的详细,挺好用的。

  2. Pingback引用通告: 浏览器 CSS 兼容写法的测试总结 « 稚子的成长博客

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注