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 选择器 基本选择器介绍
Jan 21 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 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
smarty模板引擎之分配数据类型
2015/03/30 PHP
twig模板常用语句实例小结
2016/02/04 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
写的htc的数据表格
2007/01/20 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
Python面向对象封装操作案例详解
2019/12/31 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python实现AdaBoost算法的示例
2020/10/03 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
印度购物网站:TATA CLiQ
2017/11/23 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
数字漫画:comiXology
2020/06/13 全球购物
幼儿教师国培感言
2014/02/19 职场文书
《四季》教学反思
2014/04/08 职场文书
社区服务活动小结
2014/07/08 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
入党团支部推荐意见
2015/06/02 职场文书
推广普通话的宣传语
2015/07/13 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫