CSS3 PIE：圆角减慢 IE9，即使它本机支持它们

Posted 2023-05-08

【中文标题】CSS3 PIE：圆角减慢 IE9，即使它本机支持它们

【英文标题】：CSS3 PIE: rounded corners slow down IE9, even though it supports them natively

【发布时间】：2012-02-04 07:30:32

【问题描述】：

我正在使用CSS3 PIE 为 IE7/8 添加对圆角的支持。我发现当页面上有很多带有圆角的元素时，启用 PIE 时 IE9 中的性能会显着下降：滚动变得迟钝，简单的悬停效果（如链接颜色变化）变得显着延迟等。

但是根据 PIE 自己的文档，如果浏览器本身支持您正在使用的特定 CSS3 功能，那么 PIE 在 IE9 中“什么都不做”。那么理论上，如果我只使用border-radius（IE9支持），启用PIE应该不会影响性能。

这可能是什么原因造成的？

【参考方案1】：

我将-pie-poll: false; 添加到页面上应用了 PIE 的所有元素中，这大大加快了 IE9 的速度，使其与 IE7/8 相当。我相信默认情况下，PIE 每 250 毫秒轮询一次所有元素以进行更新；将 -pie-poll 设置为 false 可防止在元素被渲染和/或与之交互之前发生任何更新。

这仍然不能解释为什么 PIE 会轮询 IE9 中不使用任何非原生 CSS3 功能的元素，但它确实解决了问题。

【参考方案2】：

尝试使用条件 cmets，这样 IE9 甚至不会加载代码。

<!--[if lte IE 8]>
  // CSS3 pie scripts
<![endif]-->

【讨论】：

我考虑过，但我仍然希望能够在 IE9 中使用 PIE，因为它本身不支持线性渐变等功能。