前端的攻城师们,Hign起来把,目前的CSS3越来越流行了,效果也越来越好了,可是蛋疼的IE9-就是不支持,肿么办呢?
难道做一个圆角边框、阴影、或者渐变也要用到图片吗? Oh .. It’s Shit. 今天看别人的源码的时候无意发现了一个以前未见过的神马咚咚…
pie.htc,这是神马?找Google大婶sos了几下瞬间查出来了,原来还有如此强大的工具.好,废话不说了.贴上效果图,
来自:http://www.zhjie.net/css3pie-ie678-will-support-css3-effects.htm
先下载库文件:http://css3pie.com/download-latest
打开后有5个文件
一、使用.htc hack
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.box{
margin :
20px auto
0 ;
width : 300px ;
height : 200px ;
border : 1px
solid #ccc ;
-webkit-border-radius: 5px ;
-moz-border-radius: 5px ;
border-radius: 5px ;
-webkit-box-shadow:
#ddd 2px
2px 2px ;
-moz-box-shadow:
#ddd 2px
2px 2px ;
box-shadow:
#ddd 2px
2px 2px ;
background :
#EEFF99 ;
background : -webkit-gradient(linear,
0 0 ,
0 bottom , from( #9bbb59 ), to( #ffffff ));
background : -moz-linear-gradient( #9bbb59 ,
#ffffff );
background : linear-gradient( #9bbb59 ,
#ffffff );
-pie- background : linear-gradient( #9bbb59 ,
#ffffff );
behavior:
url (pie/PIE.htc);
}
|
二、使用JS hack
除了传统的.htc hack方法外,PIE还增加了一个PIE.js文件,就是存JS版本的hack,相对与传统的.htc hack,JS版本不会和.htc方法一样受到一些限制。
1.在页面引入PIE.JS
1
2
3
|
<!--[ if
lt IE 10]>
<script type= "text/javascript"
src= "PIE.js" ></script>
<![endif]-->
|
2.未指定的元素添加需要的css属性(圆角、阴影或渐变).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.box{
margin :
20px auto
0 ;
width : 300px ;
height : 200px ;
border : 1px
solid #ccc ;
-webkit-border-radius: 5px ;
-moz-border-radius: 5px ;
border-radius: 5px ;
-webkit-box-shadow:
#ddd 2px
2px 2px ;
-moz-box-shadow:
#ddd 2px
2px 2px ;
box-shadow:
#ddd 2px
2px 2px ;
background :
#EEFF99 ;
background : -webkit-gradient(linear,
0 0 ,
0 bottom , from( #9bbb59 ), to( #ffffff ));
background : -moz-linear-gradient( #9bbb59 ,
#ffffff );
background : linear-gradient( #9bbb59 ,
#ffffff );
-pie- background : linear-gradient( #9bbb59 ,
#ffffff );
}
|
3.使用之前需要判断DOM是否加载完成,为了安全,还需要加上一些判断。例如使用jQuery的话,可以这样写:
1
2
3
4
5
6
7
|
$( function () {
if
(window.PIE) {
$( '.rounded' ).each( function ()
{
PIE.attach( this );
});
}
});
|
使用JS的缺点:
http://www.zhjie.net/css3pie-ie678-will-support-css3-effects.htm
分享到:
相关推荐
引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果
1.PIE.htc是一个可以解决IE6/7/8无法支持CSS3属性的文件,其利用VML绘制相关的效果。要注意的是它并不能实现所有CSS3效果,其兼容的属性有:box-radius,线性渐变( linear-gradient),rgba,box-shadow,border-image。...
让IE 6,7,8支持CSS3的部分属性。它可以让低版本IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。
PIE.js 2.0 beta版,它的官网上没有中文文档,也没得demo下载,自己动手丰衣足食,抠它的demo代码抠了一个通宵,自己又翻译了一下它的使用说明,特来上传方便各位兄弟姐妹
pie.js以及pie.htc支持在ie8浏览器支持css3的border-redius属性
可以让IE8支持圆角,阴影等效果。 保持你风格的统一,具体用法可以去看看这个文章 http://www.th7.cn/web/html-css/2011/12/24/4127.shtml
CSS3的很多新属性在IE9及以前的版本中都没法实现,而CSS3pie正好可以解决这个问题,只需要在CSS代码中引入如下代码即可: behavior: url(path/to/pie_files/PIE.htc);...这样IE9及以前的版本就能支持CSS3的属性了。
使用pie.htc可使IE6/7/8兼容部分CSS3属性,实际上是利用VML进行实现
NULL 博文链接:https://u-czh.iteye.com/blog/1565867
CSS3 Pie工具可以让IE6至IE8版本实现大多数的CSS3修饰特性,如圆角、阴影、渐变等等,通过这个工具,可以在线修改想要的效果,并即时生成css代码,有点意思了吧 ^^
让IE 6,7,8支持CSS3的部分属性。今天要给大家介绍的这个htc,它可以让IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。不相信?你可以在IE...
首先看到能让IE8及以下的IE亲们用上css3的border-radius和Gradient还有box-shadow着实兴奋了一大把。是的,你没有看错,用css3PIE就可以了,想了解猛戳链接。这里也不介绍怎么使用了,官方有文档。 这是一坑 但还是...
CSS3 Pie支持的CSS3语法有: border-radius 圆角 box-shadow 块阴影 border-image 图片边框 multiple background images 多背景 linear-gradient as background image 线性渐变背景图片 CSS3 Pie是一个/PIE-2.0beta...
解决IE低版本兼容模式下border-radius等CSS样式不生效的组件
使用CSS3 Pie可以让IE6至IE8版本实现大多数的CSS3修饰特性,如圆角、阴影、渐变等等。→ 访问 CSS3 Pie CSS3 Builder 使用这款工具可以制作出漂亮的CSS3盒子,像是Photoshop制作出来的效果。→ 访问 CSS3 Builder ...
相信做前端开发都知道,IE6、IE7都不支持:active伪类,IE6更甚,连:hover伪类都不支持。为了解决这个问题,一般都会引入一个csshover.htc文件来解决,本文将介绍解决此问题的实现过程,需要了解的朋友可以参考下
HTML5 和 CSS3 响应式设计标语和部分标题的 CSS3 过渡为高像素比屏幕交换图像用于创建 CSS 文件的 CSS 预处理器 (SCSS) 优化图像用于 IE8 的HTML5shiv.js 用于 IE8 的Respond.js 适用于 IE8,9 的CSS3 PIE Normalize...
IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题,而FF、Chrome原生的浏览器支持是的优雅的圆角感觉较好,如何解决这个问题呢? 一种比较传统的方案是放弃CSS3,使用背景图,但是这种...
黑色计算器1.0.1 blackCalculator是... 确保:black_calculator.css,black_calculator_ie.css和PIE.htc在文件夹“ css /”内(您可以使用名为“ css”的参数来更改文件夹) 现在,我们在一个空的DIV上调用方法“ black
这是让所有的IE浏览器都兼容CSS3特性的一个完整案例,为了大家方便学习特此提供,相关的文章的地址是 http://blog.csdn.net/lxcao/article/details/53192287,欢迎大家学习和下载!