让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实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 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 register_shutdown_function函数的深入解析
2013/06/03 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
js日历功能对象
2012/01/12 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
tensorboard显示空白的解决
2020/02/15 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
实验教师岗位职责
2014/02/13 职场文书
英文求职信范文
2014/05/23 职场文书
三八节活动主持词
2015/07/04 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技