让IE6支持css3,让 IE7、IE8 都支持CSS3


Posted in HTML / CSS onOctober 09, 2011

CSS3 有很多很强大、绚丽的效果,比如,圆角,阴影,渐变透明,渐变背景,等等。
因为IE6时代,没有什么标准,而因为各种原因,IE6用户几乎不会更新IE版本。
让IE6,IE7,IE8支持CSS3效果,有一个思路就是利用 VML 模拟。
VML是The Vector Markup Language(矢量可标记语言),原本是微软自己开发的东西,很强大。
也就是说,IE下面,可以用 VML做出圆角 。半透明、阴影 、渐变背景。
早在去年的时候,就有老外这个思路写成了插件,方便前端程序员开发。。。
它可以让IE6,IE7,IE8 支持 CSS3特效……
之前的 bug 一直有一个严重 bug,今天上去看的时候,官方修正了这个Bug ,并且增加了js 渲染方法(之前是用behavior导入)。

--------------------------------------------------------------------------------
看看如何调用:
1、在你的网页加载 PIE.js 脚本。
注意,用IE专用的注释,防止非IE浏览器下载。

复制代码
代码如下:

<!--[if lt IE 10]>
<script type="text/javascript" src="PIE.js"></script>
<![endif]-->

2、用js 调用:
复制代码
代码如下:

$(function() {
if (window.PIE) {
$('.rounded').each(function() {
PIE.attach(this);
});
}
});

3、已经搞定了。

--------------------------------------------------------------------------------
在让 IE6支持 CSS3 的所有插件中,这个应该是最好的插件了。

官方实时测试例子:http://css3pie.com/
官方下载:http://css3pie.com/download-latest

--------------------------------------------------------------------------------
补充:
根据我对这个插件测试:最好在要加载效果的 box 增加CSS属性: overflow:hidden; 有些时候,圆角会出问题。

试用的时候,有问题,留言一起讨论一下。
有兴趣同学,可以看看源代码,加强对vml 的了解。。。

HTML / CSS 相关文章推荐
使用css3制作动感导航条示例
Jan 26 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 #HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 #HTML / CSS
CSS3 特效范例整理
Aug 22 #HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 #HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 #HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 #HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 #HTML / CSS
You might like
浅析php学习的路线图
2013/07/10 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
js类型检查实现代码
2010/10/29 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
python进阶教程之异常处理
2014/08/30 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
python中altair可视化库实例用法
2021/01/26 Python
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
值传递还是引用传递
2015/02/08 面试题
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
安全生产网格化管理实施方案
2014/03/01 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
个人求职信格式范文
2015/03/20 职场文书
MySQL基础(一)
2021/04/05 MySQL