我们都知道IE浏览器不支持CSS3的某些属性。 外国工程师对现状并不满意。 他们总是想尽办法让IE浏览器支持CSS3属性。 我觉得这样的工作是非常有意义和有价值的,能够带动整个技术领域的发展。 改善。 到目前为止,已经有很多工具可以让IE支持一些CSS3属性。 例如:
1. IE7.js(以及 IE8.js、IE9.js),作者:Dean Edwards
这个东西很可能就是试图让IE支持CSS3属性的鼻祖。 功能相当强大,但是性能成本比较大。 它必须解析大量的文件脚本并向 DOM 添加大量元素和 ClassName。
2. eCSStender,作者:Aaron Gustafson
此方法支持 @font-face、CSS3 选择器以及 CSS3 背景和边框。
3. 德鲁·迪勒 (Drew Diller) 的 DD_roundies
这是基于IE VML的一些CSS3效果的实现。
4. border-radius.htc 作者:Remiz Rahnas
该方法使用htc文件并用VML实现。 缺点是无法手动适应目标元素的位置和大小,因此无法应用于动态脚本环境。
5. ie-css3.htc 作者:Nick Fetchak
关于这个方法,我在上面的文章《让IE6/IE7/IE8浏览器支持CSS3属性》中已经介绍过。 我建议你阅读这篇文章。 并不是说ie-css3.htc有多好,而是文章介绍了htc文件和VML预测,让大家了解IE下类CSS3疗效的原理。 。
6. ie-css3.js 作者:Keith Clark
它是一个与 IE7.js 类似的项目,具有利用其他 JavaScript 库的选择器,因此它本身较小。
7. cssSandpaper,作者:zoltandulac
这是使用 IE 过滤器实现一些 CSS3 属性的方法。
8. css3 PIE.htc by css3pie
支持:border-radius圆角、box-shadow框阴影、渐变渐变、多背景图、多背景。
下面简单介绍一下第8种方法:
官方网站:
如何使用:
第1步:下载css3 PIE.htc文件
第二步:将PIE.htc文件上传到你的网站目录下,可以上传到该目录下,只要记住这个目录即可。
第三步:创建一个html文件,编写一段css3代码,导入PIE.htc,如下:
代码如下所示:
#ID {
边框:1px实线#999;
-webkit边框半径:10px;
-moz-边框半径:10px;
边框半径:10px;
行为: url(path/to/PIE.htc);
注意:.htc 文件路径是相对于 html 文件的,而不是相对于 css 文件的。
一些已知问题:
这种方法并不是万能的,也有一些局限性和需要注意的地方。
1. z-index相关问题
这个CSS3效果在IE下的实现是通过VML的方式,将容器元素绘制成圆角或者投影效果,然后将这个容器元素作为目标元素的兄弟节点插入。 如果目标元素是position:absolute或position:relative,那么css3-container元素将设置与其相同的z-index值。 在DOM树中,同级的元素总是在它旁边的覆盖物后面,所以覆盖物就是通过这种方式实现的,它防止了其他可能碰巧插入它的元素。
那么,问题来了,如果当前元素的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”的内容类型标头,否则行为将被忽略。 大多数网络服务器提供正确的内容类型,但有些服务器存在问题。
如果你发现你的机器上的PIE模式无效,即这里的htc文件指的pie.htc文件无效,请检查你的服务器配置,可能需要更新到最新的content-type。 例如,对于 Apache,您可以在 .htaccess 文件中执行以下操作:
代码如下所示:
AddType 文本/x-component.htc
但是,由于某些原因,您很难更改服务器配置(例如公共主机哪些浏览器支持css3,或者空间服务提供商提供的服务器),您可以使用PHP文件来间接调用htc文件。 我只需要把这个PHP文件的代码给你看一下你就知道它的意思了,如下:
代码如下所示:
header( '内容类型:文本/x-组件' );
include('pie.htc');
通过PHP文件降低一个富含“text/x-component”的Content-type header,同时调用pie.htc文件。
对于上图所示的php文件,可以点击这里:pie.php(右键-【目标|链接另存为】),也可以直接新建一个php文件,将两行代码复制进去。 或者本文提供的原始打包资源的wrappers文件夹下也有这个php文件,只不过名字是小写的。
如果使用上面的php文件,则需要将pie.php和pie.htc放在同一文件夹中,CSS中的行为应该是:
代码如下所示:
行为: url(pie.php);
以上是一些常见的、主要的问题。 当然,如果页面比较复杂,还会出现其他意想不到的情况。 在此哪些浏览器支持css3,祝您好运!
发表评论