CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性


Posted in HTML / CSS onSeptember 02, 2014

首先看到能让IE8及以下的IE亲们用上css3的border-radius和Gradient还有box-shadow着实兴奋了一大把。是的,你没有看错,用css3PIE就可以了,想了解猛戳链接。这里也不介绍怎么使用了,官方有文档。

这是一坑

但还是要提一下,在使用过程中的pie路径一定要是相对于正在浏览页面的相对路径。如下代码的url路径不是相对于css文件所在路径。因为虽然是在css里写的url,但是是在css被应用前就对html起作用了。

复制代码
代码如下:

behavior: url(path/to/pie_files/PIE.htc);

其中的PIE.htc文件就是pie的灵魂所在了,当然你也可以用他zip包里的js来实现。(那个包里很全的,你根据自己要用的方法选择一个对应的文件就可以了,没必要全部贴到项目里)

这是第二坑

路径弄对了,想说,要在IE下看一看奇迹的出现!但!!注意这个但,第一次使用的时候,被pie处理的Element背景就全消失了,重点是,官方的start教程根本没提这一情况。

如果出现这种情况,表示,你使用的方法是对的,其实PIE已经生效了,至于为什么背景不见了,解决办法如下。

复制代码
代码如下:

yourCssSelector{ position:relative;}
/*或者*/
yourCssSelector{ position:absolute;}

如果还是没解决,请给你的element加上一个合适的z-index的属性。
然后一切就正常了

不要太天真

请不要在:after、:before中使用pie,这样完全无效。

来自jason的解释

复制代码
代码如下:

No, unfortunately. The reason is that pseudo-elements have no DOM and therefore there's nothing that PIE can manipulate.

最后我有一个很不解的问题,在fancybox上用pie,貌似不管怎么解决方法,背景还是不会出现!!如果有解决的朋友,一定要!!一定要告诉我!!!
HTML / CSS 相关文章推荐
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 #HTML / CSS
css3中transition属性详解
Sep 02 #HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 #HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 #HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 #HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 #HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 #HTML / CSS
You might like
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
vue实现短信验证码输入框
2020/04/17 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
python检测lvs real server状态
2014/01/22 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
python实现最大优先队列
2019/08/29 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
教师自我鉴定
2013/12/13 职场文书
追悼会子女答谢词
2014/01/28 职场文书
小学教师节活动方案
2014/01/31 职场文书
我的梦想演讲稿
2014/04/30 职场文书
档案工作汇报材料
2014/08/21 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
学校证明范文
2015/06/24 职场文书
我爱我班主题班会
2015/08/13 职场文书