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 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
使用CSS设置滚动条样式
Jan 18 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序列号生成函数和字符串替换函数代码
2012/06/07 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
在python中pandas的series合并方法
2018/11/12 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Python创建字典的八种方式
2019/02/27 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
大学生个人自我鉴定
2013/12/03 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
MySQL查询日期时间
2022/05/15 MySQL