浏览器
双核浏览器
游戏浏览器
高速浏览器
视频浏览器
IE浏览器
浏览器周边
手机浏览器
安卓游戏
音乐舞蹈
养成游戏
儿童游戏
仙侠手游
角色扮演
策略塔防
休闲益智
动作冒险
飞行射击
模拟经营
体育运动
赛车竞速
网络游戏
安卓软件
资讯阅读
生活服务
影音播放
购物理财
效率办公
趣味娱乐
交通出行
学习教育
摄影图像
在线音乐
系统工具
网络购物
聊天工具
安全杀毒
图片编辑
新闻资讯
软件资讯
游戏资讯
手机教程
手游攻略
游戏攻略
软件教程
IE专区
安卓专题
文章合集
电脑软件专题
安全软件
杀毒软件
系统安全
加密解密
防火墙
远程控制
木马查杀
影音软件
网络电视
视频播放
音乐播放
视频制作
音频编辑
录音录像
教育学习
外语学习
教育管理
早教启蒙
在线课堂
成人教育
资格考试
聊天社交
即时通讯
视频聊天
在线交友
变声器
表情包
办公软件
线上会议
文档管理
行业管理
考勤打卡
应用工具
输入法
下载工具
时钟日历
记事本
文件管理
计算器
编程开发
编程工具
JAVA相关
加壳脱壳
编程控件
数据库
网页源码
软件开发
补丁制作
系统美化
桌面制作
壁纸大全
系统主题
屏幕保护
桌面辅助
系统软件
系统优化
备份还原
系统检测
U盘工具
磁盘工具
驱动补丁
图文处理
图片素材
图像处理
图片制作
图片压缩
电子相册
抓图工具
其他软件
电子书籍
模拟器
辅助工具
交通出行
手机管理
其他工具
素材下载
字体素材
PPT素材
专区
文章合集
软件
游戏
浏览器
安卓专题
软件
游戏
浏览器
IEfans/ IE专区/ IE技巧 /让IE6/IE7/IE8支持CSS3属性的8种方法介绍

让IE6/IE7/IE8支持CSS3属性的8种方法介绍

2023-06-01 15:00:02 编辑:匿名

我们都知道,IE浏览器暂不支持CSS3的一些属性。国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的进步的。到目前为止,有不少可以让IE支持部分CSS3属性的工具。例如:

1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js)

这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的元素以及ClassName。

2. Aaron Gustafson的 eCSStender

此方法支持@font-face, CSS3 选择器, 以及 CSS3 Backgrounds 和 Borders。

3. Drew Diller的 DD_roundies

这是一个基于IE VML实现一些CSS3效果的。

4. Remiz Rahnas的border-radius.htc

此方法使用htc文件,配合VML实现,缺点在于不能自动适应目标元素的位置和大小,所以不能适用于动态脚本环境。

5. Nick Fetchak的 ie-css3.htc

关于此方法,我在前面的让IE6/IE7/IE8浏览器支持CSS3属性这篇文章中已经做过介绍。我是建议您看看这篇文章,倒不是ie-css3.htc这个玩意多么好,而是文中对htc文件以及VML预言做了些介绍,对于您了解IE下实现类似CSS3效果原理有所了解。

6. Keith Clark的ie-css3.js

这是个与IE7.js类似的项目,其选择器可借助其他JavaScript库,所以其本身较小。

7. zoltandulac的cssSandpaper

这是一个使用IE滤镜实现一些CSS3属性的方法。

8. css3pie的css3 PIE.htc

支持:border-radius圆角 、 box-shadow 盒阴影 、 gradient渐变 、 multiple background images多背景 。

下面对第8第方法的做一下简单介绍:

官方网站:http://css3pie.com/

使用方法:

第一步:下载css3 PIE.htc 文件

第二步:将PIE.htc文件上传到你的网站目录中,上传到目录哪里都可以,只要你记住这个目录。

第三步:创建html文件,写一段css3代码,并引入PIE.htc,如下面这段:

复制代码代码如下:
#id {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}

注意:.htc 文件路径是相对于html文件的路径,而不是相对于css文件。

已知的一些问题:

此方法并不是万能的,也有一些局限性和需要注意的地方。

1. z-index相关问题

IE下这些CSS3效果实现是借助于VML,由VML绘制圆角或是投影效果的容器元素,然后这个容器元素作为目标元素的后兄弟节点插入,如果目标元素position:absolute 或是 position:relative,则这个css3-container元素将会设置与之一样的z-index值,在DOM tree中,同级的元素总是后面的覆盖前面的,所以这样就实现了覆盖,又避免了可能有其他元素正好插入其中。

所以,问题来了,如果目前元素的position属性为static,也就是默认属性,则z-index属性是没有用的,无覆盖可言,所以此时IE浏览器下CSS3的渲染是不会成功的。要解决也很简单,设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值(不可为-1)。

2. 相当路径的问题

IE浏览器的behavior 属性是相对于HTML文档而言的,与CSS其他的属性不一样,不是相对于CSS文档而言的。这使得使用pie.htc文件不怎么方便。如果绝对路径于根目录,则CSS文件不方便移动;如果相对路径与HTML文档,则pie.htc文件在不同HTML页面见的重用性大大降低。同时,诸如border-image后面的URL属性路径也不好处理。

3. 缩写的问题

使用PIE实现IE下的CSS3渲染(其他方法也是一样),只能使用缩写的形式,例如圆角效果,我们可以设置border-top-left-radius表示左上圆角,但是PIE确实不支持这种写法的,只能是老老实实的缩写。

4. 提供正确的Content-Type

要想让IE浏览器支持htc文件,需要一个有着text/x-component 字样的content-type 头部,否则,会忽视behavior。绝大数web服务器提供了正确的content-type,但是还有一部分则有问题。

如果您发现在您的机子上PIE方法无效,也就是htc文件这里指pie.htc文件无效,检查您的服务器配置,可能其需要更新到最新的content-type。例如对于Apache,您可以在.htaccess文件中做如下处理:

复制代码代码如下:
AddType text/x-component .htc

但是,由于某种原因,您无法修改服务器配置(例如公用主机,或是空间服务商提供的服务器),您可以用一个PHP文件来间接调用htc文件。我只要给你看下这个PHP文件的代码您就知道什么意思了,如下:

复制代码代码如下:
?php
header( 'Content-type: text/x-component' );
include( 'pie.htc' );
?

通过PHP文件来增加一个含有text/x-component字样的Content-type头,同时调用pie.htc文件。

关于上面所示的php文件,您可以狠狠地点击这里:pie.php(右键 [目标|链接另存为]),或者您可以直接新建一个php文件,把上面的两行代码复制进去。或者在本文提供的原始打包资源的wrappers文件夹里面也有此php文件,不过名称是大写的。

如果您使用上述php文件,您需要将pie.php和pie.htc放在同一个文件夹目录下,同时CSS中的behavior写法应该是:

复制代码代码如下:
behavior: url(pie.php);

以上为一些常见的主要的问题,当然,在复杂的页面情况下,还会有其他意想不到的情况,这里,祝您好运了!

相关推荐

浏览器更新