使用PIE对IE6、7、8进行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 来加载即可自动实现效果,
#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) { //1.9以上版本jq不支持$.browser.msie方法 解决方差查看此篇文章
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});
原文地址:http://blog.zzstudio.net/web/article_249.html
使用PIE对IE6、7、8进行CSS3兼容介绍和经验总结的更多相关文章
- 使用PIE对IE进行CSS3兼容介绍和经验总结
国外团队开发的兼容插件,去年做项目时才发现,非常强大 主角:PIE.js , PIE.htc 两种方法可以实现 官方网站:http://css3pie.com/ 演示地址:http://css3pie ...
- 使ie6/7/8支持css3的方法
使用PIE.htc让IE6\7\8支持CSS3部分属性 包括圆角,阴影,背景渐变等效果 下载地址 http://css3pie.com/download/ 需要注意几点的是 第一,pie是以相对页面h ...
- css3兼容IE8的方案 各个ie的hack
虽然现在很多项目已经对低版本IE不要求了,但是还有部分公司对IE8还是很执着的,咱作为屌丝前端程序员不能和老板说前端潮流,不能说趋势,只能动脑子了,下面就分享一些css3兼容ie8的方案思路.主要是实 ...
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- 使用PIE.htc让万恶的IE内核浏览器IE6\7\8支持CSS3部分属性
万恶的IE内核浏览器,这是多少前端程序员头疼的事情... 今天给大家介绍一下如何用 PIE.htc 来让IE浏览器支持CSS3的 border-radius.box-shadow.CSS3 Backg ...
- 一个很实用的css3兼容工具很多属性可以兼容到IE6
当你看到这样的效果图是不是已经崩溃了 css3没出来之前大部分人基本都是用图片的方式拼出来的 腾讯邮箱就是这么做的 然后你想和设计说换直角吧.我用图片的好烦的感觉!而且我们还要兼容到ie6 她和你说别 ...
- 让IE6/IE7/IE8支持CSS3属性的8种方法介绍
我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...
- ie6、7、8兼容部分css3
做法很简单下载一个ie-css3,然后有css3的样式里加入behavior: url(js/ie-css3.htc)就可以了(js/ie-css3.htc是文件地址) <!DOCTYPE ht ...
随机推荐
- ubuntu 12.04 (64位)下安装oracle 11g过程及问题总结
最近公司用到oracle,在ubuntu64位安装了一下,碰到了一些问题,在网上搜索到了一些答案,在此作为笔记记录下来. 1.首先下载oracle并解压不再赘述. 2.安装依赖包 sudo apt-g ...
- spring、spring mvc以及IOC的阅读
spring vs spring-mvc spring是应用级框架 spring mvc只是一个mvc框架 spring现在包含很多子模块,我们用的最多的是依赖注入. spring模块可分为以下: C ...
- 20169219《Linux内核原理及分析》第十二周作业
格式化字符串漏洞实验 格式化字符串攻击原理是利用格式化函数(如printf())的沿着堆栈指针向下打印的特性,通过只提供格式化字符串但不提供对应的变量,读取栈内空间的内容. 更进一步,通过将某个要攻击 ...
- leetcode Word Search 待解决?
终于搞定了这个DFS,最近这个DFS写的很不顺手,我一直以为递归这种东西只是在解重构时比较麻烦,现在看来,连最简单的返回true和false的逻辑关系都不能说one hundred present 搞 ...
- 动态横向(水平)合并GridView数据行DataRow的列
前一段时间,Insus.NET有写过<动态合并GridView数据行DataRow的列>http://www.cnblogs.com/insus/p/3238348.html, 那是纵向( ...
- 浏览器显示XML文档
在网站后台管理介面上,有一个预览铵钮,管理员能点一点,把XML的文档显示于浏览器上.这个XML文档如下: HTML Markup: 去.aspx.cs写ButtonPreview_Click事件: 运 ...
- 用Oracle的函数,判断点是否在多边形内
转自:http://blog.csdn.net/familyshizhouna/article/details/68944683 参考:http://blog.csdn.net/qwlovedzm/a ...
- php二维数组的某一字段 做分组统计
$country=array_column($order,'country');$countryGP=array_count_values($country);对二维数组的某一字段 做分组统计
- 状压DP 【洛谷P3694】 邦邦的大合唱站队
[洛谷P3694] 邦邦的大合唱站队 题目背景 BanG Dream!里的所有偶像乐队要一起大合唱,不过在排队上出了一些问题. 题目描述 N个偶像排成一列,他们来自M个不同的乐队.每个团队至少有一个偶 ...
- node mysql问题:Client does not support authentication protocol requested by server; consider upgrading MySQL client!
node后台 mysql处理模块(版本:2.16.0) 执行connect方法时报错: Client does not support authentication protocol requeste ...