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动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 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表单提交问题的解决方法
2011/04/12 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
python爬取微信公众号文章
2018/08/31 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
python实现按日期归档文件
2021/01/30 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
2014年综治宣传月活动总结
2014/04/28 职场文书
详解Django的MVT设计模式
2021/04/29 Python
pandas提升计算效率的一些方法汇总
2021/05/30 Python