代码之家  ›  专栏  ›  技术社区  ›  Kyle

CSS3PIE如何工作?

  •  22
  • Kyle  · 技术社区  · 14 年前

    CSS3pie在幕后发生了什么使IE能够使用CSS3功能?

    2 回复  |  直到 11 年前
        1
  •  30
  •   Spudley Pat    14 年前

    这个 CSS3Pie website 有很多细节,但我会尽量解释一下。

    Internet Explorer支持名为 CSS行为 . 这是一个特定于IE的功能,它允许您指定当一个CSS事件被触发时要运行的javascript功能。

    为此,它使用带有 .HTC 扩展,它基本上是带有自定义XML代码的简单包装的JavaScript代码。由于行为是一个特定于IE的特性,所以它并没有被大量使用,除了一些类似于CSS3pie的黑客,这些黑客设计用来解决浏览器的一些缺点。

    在CSS3Pie中,它实现了IE中缺少的几个特性,即边界半径、框阴影和线性渐变。

    所有这些东西 可以 可以用IE(甚至更旧的版本)完成,但可以用非标准的方式完成。例如,IE支持称为VML的矢量图形语言(同样,这是IE特有的)。vml允许您使用javascript绘制图形,它包括创建具有圆角、渐变填充和阴影的框的函数。

    CSS3PIE结合了这些特定于IE的特性。作为一种CSS行为,当使用特定的CSS代码时,它会触发JavaScript代码。这个javascript在包含vml的页面中创建额外的元素,然后将其样式设置为与css类应用的元素匹配。然后修改主元素以删除大部分相关样式,以便可以看到它后面的vml元素的样式。

    在一天结束的时候,这是一个黑客。实际上,它并没有向IE添加新功能;它只是使一些现有的IE功能以稍微标准化的方式工作。

    如果你想深入研究,CSS3PIE是开源的,所以你可以研究它。但是,它是非常复杂的代码,因此您可能会发现查看其他一些(更简单的)HTC文件也很容易。

    在CSS3pie之前,已经有一个 available from HTMlRemix.com 它提供了圆角,工作方式与CSS3PIE非常相似。css3pie是一个更好的软件,但您可能会发现htmlremix代码更容易理解。

    您可能还需要研究其他一些问题:

    • Whatever:Hover 修正了ie6,使css:hover功能可以与所有HTML元素一起使用,而不仅仅是 <a> 标签。

    • IE PNG Fix 使旧版本的IE能够更好地与具有透明度的PNG图形一起工作。

    希望能回答你的问题。

        2
  •  1
  •   takeshin    14 年前

    它只是使用javascript来模拟缺失的行为。

    推荐文章