javascript - css3pie 打乱了 DOM，导致 jQuery 选择器错误

Question

为了在 IE 6/7/8 上获得 CSS3 效果(边框半径、框阴影...)，我使用了 css3pie。

然而，css3pie 在 DOM 中生成了一些 css3-container (v1)/css3pie (v2) 标签，这打乱了预期的架构。这是一个例子:

CSS

pre {
    border: 1px solid #aaa;
    border-radius: 5px;
    behavior: url(pie.htc);
}

HTML

<div class="foo">bar</div>
<p class="getme">paragraph</p>
<pre>preformatted</pre>

jQuery

// undefined        expected: getme
alert($("pre").prev().attr("class"));

// css3-container   expected: p
alert($("pre").prev()[0].tagName);

// getme            expected: foo
alert($("pre").prev().prev().attr("class"));

// 4                expected: 3
alert($("body").children().size());

// will not set     expected: Impact
$("p+pre").css({fontFamily: "Impact"});

// it almost affects all such jQuery selctors

实际生成的源码是这样的:

<DIV class="foo">bar</DIV>
<P class="paragraph">paragraph</P>
<css3-container...>
    <border...>
        <shape...><stroke></stroke><stroke></stroke></shape>
    </border>
</css3-container>
<PRE>preformatted</PRE>

有人遇到过这种问题吗？任何解决方法？是否有 css3pie 的替代方案来让 CSS3 在 IE 6/7/8 上运行？

Answer 1

我也尝试过使用 CSS3PIE，但遇到了类似的问题(主要是 jquery 和 mediaqueries)。事实上，对于它引起的所有问题，我都没有找到简单/实用的解决方案。

我的建议是使用 Modernizr's load逐步增强旧版 IE 的用户体验。它需要一个更难/更长的过程，因为您必须为每个 CSS3 功能设置一个 polyfill。正如 mario.tco 已经告诉您的那样，有一个 list of cross-browser polyfills在 Modernizr 的仓库中。这是 feature detection 的列表片段。

另请查看 html5please和 caniuse .

关于 IE6 和 7，除非您的站点统计数据表明有什么不同，否则使用率为 below 1% on average (除了一些异常(exception)，检查 ie6countdown )，所以你几乎可以忽略它们。但是，使用 conditional comments您可以针对每个 IE<10 版本使用特定的回退。

请记住，您实际上不需要在 IE<9 上使用框阴影和其他视觉装饰(除非它们是可用性所必需的)。事实上，任何回退都可能导致巨大的性能问题(想想 IE7 用户可能拥有的硬件)。 Websites don't need to look exactly the same in any browser .