使用PIE对IE进行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 来加载即可自动实现效果, 

#test {
    border-radius: 3px;
    behavior: url(/PIE.htc);
}

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


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

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

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

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

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

使用 PIE.js 文件

<script type="text/javascript" src="/PIE.js"></script>
<script type="text/javascript">
PIE.attach(document.getElementById("test"));
</script>

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

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

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/PIE.js"></script>
<script type="text/javascript">
(function($){
    $.pie = function(name, v){
        // 如果没有加载 PIE 则直接终止
        if (! PIE) return false;
        // 是否 jQuery 对象或者选择器名称
        var obj = typeof name == 'object' ? name : $(name);
        // 指定运行插件的 IE 浏览器版本
        var version = 9;
        // 未指定则默认使用 ie10 以下全兼容模式
        if (typeof v != 'number' && v < 9) {
            version = v;
        }
        // 可对指定的多个 jQuery 对象进行样式兼容
        if ($.browser.msie && obj.size() > 0) {
            if ($.browser.version*1 <= version*1) {
                obj.each(function(){
                    PIE.attach(this);
                });
            }
        }
    }
})(jQuery);
                                                                               
$(function(){
    $.pie('.for-ie6', 6);
                                                                               
    var objs = $('.for-ie, .test, .test1, .test2 .test3, #test4');
    $.pie(objs, 9);
});
</script>

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

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

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






目录
相关文章
|
6月前
|
编解码 移动开发 前端开发
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
79 0
|
3月前
|
前端开发 开发者
【前端大揭秘】CSS盒子模型的爱恨情仇:一场关于标准与IE模型的精彩对决!
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码,清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸,而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策,提升网页布局的质量与美观性。
34 1
|
4月前
|
前端开发 C++
CSS【详解】 标准盒模型 VS IE 盒模型
CSS【详解】 标准盒模型 VS IE 盒模型
46 0
|
6月前
|
移动开发 前端开发 JavaScript
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
|
6月前
|
Web App开发 前端开发
CSS Hack是什么?ie6,7,8的hack分别是什么
CSS Hack是什么?ie6,7,8的hack分别是什么
345 0
|
JavaScript
兼容IE浏览器
兼容IE浏览器
103 0
|
前端开发 JavaScript UED
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
74 0
|
JavaScript
vue里使用animated-scroll-to代替原生滚动实现兼容ie的平滑滚动定位
vue里使用animated-scroll-to代替原生滚动实现兼容ie的平滑滚动定位
106 0
|
移动开发 前端开发 JavaScript
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
|
前端开发 开发者
介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?

热门文章

最新文章