我为一个带有 css 过渡的客户创建了一张贺卡，但我不知道它与 IE9 不兼容。
贺卡是这个http://voeux.geekarts.fr/v4.html
有没有办法让它在 IE9 中工作？放置一个 jQuery 或任何 hack - 一些让它在 IE9 中工作的东西。
谢谢
【问题讨论】：
标签： internet-explorer-9 css-transitions
您可以使用 JQuery Transit 尝试相反的方法 http://ricostacruz.com/jquery.transit/
它将 JQuery 样式转换映射到 CSS3 转换并使用适当的代码（如下），如果 CSS3 转换不可用，那么它可以优雅地回退到标准 JQuery。
JQuery Transit 使用一个简单的 Javascript 方法，transition() 来执行每个操作。语法与 JQuery animate() 非常相似。
$('.box').transition({ opacity: 0 });
如果您将 transition()“映射”到 JQuery animate()，它将在标准 JQuery 中执行相同的操作（如果可用）。如果 CSS3 过渡不可用，以下代码（取自示例页面）将使用 animate()：
// Delegate .transition() calls to .animate()
// if the browser can't do CSS transitions.
if (!$.support.transition)
$.fn.transition = $.fn.animate;
【讨论】：
正如您正确识别的那样，Internet Explorer 9 是最后一个不支持 transition property 或 animations 的 IE 浏览器。话虽如此，它也是最后一个支持conditional comments 的 IE 浏览器，因此您可以想象将回退代码放入仅限 IE9 的条件注释中，并将其作为您的解决方案提供给所有 IE9（及以下）用户。
<!--[if lte IE 9]>
<script src="animation-legacy-support.js"></script>
<![endif]-->
这当然只能在 Internet Explorer 9 或更低版本的浏览器中提供。现在，您剩下要做的就是设置 jQuery 动画本身。例如，我们可以通过一系列这样的转换来运行图像：
(function () {
"use strict";
$("img.kitten")
.animate({ width: 300 }, 1000) // Animate to 300px wide
.animate({ width: 50 }, 2000) // Then, to 50px wide
.animate({ opacity: .25 }, 1000); // Then, make it semi-transparent
}());
每次您需要设置另一个关键帧时，只需添加另一个对$.fn.animate 的调用并设置您的目标状态以及动画持续时间。
需要注意的重要一点是，您需要加载 a version of jQuery that supports your target IE versions。 jQuery 2.x 仅支持 Internet Explorer 9 及更高版本，但 jQuery 1.x 支持 Internet Explorer 6 及更高版本。
希望这会有所帮助！
【讨论】：