css3pie 是如何工作的？

Posted 2023-05-08

【中文标题】css3pie 是如何工作的？

【英文标题】：How does css3pie work?

【发布时间】：2011-04-29 08:09:41

【问题描述】：

css3pie 在幕后发生了什么使得 IE 可以使用 css3 功能？

【参考方案1】：

CSS3Pie website 有很多细节，但我会尝试解释一下。

Internet Explorer 支持称为 CSS 行为 的功能。这是 IE 特有的功能，允许您指定在触发 CSS 事件时运行的 javascript 功能。

为此，它使用带有.HTC 扩展名的文件，这基本上是带有自定义XML 代码的轻包装的Javascript 代码。由于 Behaviors 是 IE 特有的功能，它的使用并不多，除了少数类似于 CSS3Pie 的 hack，旨在解决浏览器的一些缺点。

就 CSS3Pie 而言，它实现了 IE 中缺少的几个功能。这些是边框半径、框阴影和线性渐变。

所有这些事情可以在 IE（甚至更旧的版本）中完成，但是以非标准方式。例如，IE 支持称为 VML 的矢量图形语言（同样，这是特定于 IE 的）。 VML 允许您使用 Javascript 绘制图形，它包括创建圆角、渐变填充和阴影的框的功能。

CSS3Pie 结合了这些 IE 特有的功能。作为一种 CSS 行为，它在使用特定 CSS 代码时触发 javascript 代码。此 javascript 在包含 VML 的页面中创建额外元素，然后对其进行样式设置以匹配 CSS 类适用的元素。然后修改主元素，去掉大部分相关样式，这样就可以看到后面的VML元素的样式了。

归根结底，这是一个 hack。它实际上并没有为 IE 添加新功能；它只是让一些现有的 IE 功能以稍微更标准的方式工作。

如果您想更深入地挖掘，CSS3Pie 是开源的，因此您可以研究它。不过，这是相当复杂的代码，因此您可能会发现查看其他一些可用的（更简单的）HTC 文件会更容易。

在 CSS3Pie 之前，已经有一个 available from htmlRemix.com 提供圆角，其工作方式与 CSS3Pie 非常相似。 CSS3Pie 是一款更好的软件，但您可能会发现 HTMLRemix 代码更容易理解。

您可能还想了解其他一些：

Whatever:Hover 修复了 IE6，以便 CSS :hover 功能适用于所有 HTML 元素，而不仅仅是 <a> 标签。

IE PNG Fix 使旧版本的 IE 可以更好地处理具有透明度的 PNG 图形。

希望能回答你的问题。

【讨论】：

谢谢！非常彻底的答案，只是我想要的信息:)

+1。这是我在这里看到的最好的答案之一！解释得很好。

【参考方案2】：

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