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教程:新增加的结构伪类
Apr 02 HTML / CSS
玩转CSS3色彩
Jan 16 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
css弧边选项卡的项目实践
May 07 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
php生成EAN_13标准条形码实例
2013/11/13 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
pyramid配置session的方法教程
2013/11/27 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
解决Python使用列表副本的问题
2019/12/19 Python
Python有参函数使用代码实例
2020/01/06 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
如何对python的字典进行排序
2020/06/19 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
怎样创建、运行java程序
2014/08/01 面试题
《口技》教学反思
2014/02/21 职场文书
男性健康日的活动方案
2014/08/18 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
公司委托书范本5篇
2014/09/20 职场文书
分享7个 Python 实战项目练习
2022/03/03 Python