让IE6支持css3，让 IE7、IE8 都支持CSS3
发布时间：2011-10-09 12:45:51 作者：佚名 
我要评论
我要评论但凡是前端工程师，都知道IE6，IE7，IE8不支持、或者不完全支持CSS3的属性。
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 的了解。。。
因为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 的了解。。。
相关文章
CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介绍CSS3 最强二维布局系2025-02-27- 本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同2025-02-27
文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,2025-02-21- CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本2025-02-19
本文给大家介绍css3 实现icon刷新转动效果，文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性，结合实例代码给大家介绍的非常详细，感兴趣的朋友一2025-02-19- CSS3过渡属性用于实现元素从一种样式平滑过渡到另一种样式,通过设置transition-property过渡属性、transition-duration过渡时长transition-timing-function过渡函数和trans2025-02-19
- 本文介绍了如何使用CSS3创建一个简单的动态旋转加载样式,通过定义一个带有类名“loader”的HTML元素,并使用CSS样式和@keyframes规则来实现旋转动画,你可以根据需要调整样式2025-02-19
- 这篇文章主要介绍了如何使用CSS3的transition属性实现平滑的过渡动画，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧2025-02-13
本文介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果，感兴趣的朋2025-02-11- CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体2024-10-24
最新评论