zoukankan      html  css  js  c++  java
  • 让IE6IE7IE8支持CSS3属性的8种方法介绍

    我们都知道,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' );

    ?>

  • 相关阅读:
    Maven关于web.xml中Servlet和Servlet映射的问题
    intellij idea的Maven项目运行报程序包找不到的错误
    修改Maven项目默认JDK版本
    刷题15. 3Sum
    刷题11. Container With Most Water
    刷题10. Regular Expression Matching
    刷题5. Longest Palindromic Substring
    刷题4. Median of Two Sorted Arrays
    刷题3. Longest Substring Without Repeating Characters
    刷题2. Add Two Numbers
  • 原文地址:https://www.cnblogs.com/taofx/p/4139867.html
Copyright © 2011-2022 走看看