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字体效果的设置方法小结
Jun 13 HTML / CSS
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
解析PHP的session过期设置
2013/06/29 PHP
php中动态修改ini配置
2014/10/14 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
swiper4实现移动端导航切换
2020/10/16 Javascript
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
如何给Python代码进行加密
2020/01/10 Python
浅谈Python协程
2020/06/17 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
表彰大会主持词
2014/03/26 职场文书
教师节慰问信
2015/02/15 职场文书
警告通知
2015/04/25 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
Nginx报404错误的详细解决方法
2022/07/23 Servers