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
css3 border-radius属性详解
Jul 05 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
DOM基础教程之使用DOM
2015/01/19 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
js实现放大镜特效
2017/05/18 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
详解python eval函数的妙用
2017/11/16 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
python 产生token及token验证的方法
2018/12/26 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
django 外键创建注意事项说明
2020/05/20 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
新人入职感言
2015/07/31 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
Window server中安装Redis的超详细教程
2021/11/17 Redis
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android