注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

千年绿叶

黑夜给了我黑色的眼睛,我却用它来寻找光明......

 
 
 

日志

 
 

让IE6、IE7、IE8都支持CSS3  

2012-04-13 11:08:59|  分类: 网页设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

丑话说在前头:文字阴影,IE还是不支持的,所以有点遗憾啊。

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 调用(当然,在以下代码之前你需要自己先加载一个jquery库)

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

3、搞定验收。

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

官方实时测试例子:http://css3pie.com/

官方下载:http://css3pie.com/download-latest

 

以下是我的例子,不懂的朋友看了就明白啦,如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="PIE.js"></script>
<script>
$(function() {
    if (window.PIE) {
        $('.rounded').each(function() {//要调用下文中对应的类名
            PIE.attach(this);
        });
    }
});
</script>
<style>
.mm{/*文字阴影IE还是不支持*/
 font-size:100px;
 color:#000;
 text-shadow:4px 4px 1px #f00;
 behavior:url(PIE.htc);
}
.rounded{
 width:200px;
 height:200px;
 background-color:#FFF;
 border:1px #d0d0d0 solid;
 border-radius:5px;
 box-shadow:5px 5px 5px 5px #666;
}
</style>
</head>

<body>
<div class="mm">我是谁</div>
<div class="rounded"></div>
</body>
</html>

补充:

最好在要加载效果的 box 增加CSS属性: overflow:hidden; 有些时候,圆角会出问题。

有兴趣朋友,可以看看源代码,加强对vml 的了解。。。

  评论这张
 
阅读(345)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018