css3pie搞砸了DOM,导致jQuery选择器错误

Question

为了在IE 6/7/8上获得CSS3效果(border-radius,box-shadow ...),我正在使用css3pie.

但是,css3pie会css3-container (v1) / css3pie (v2)在DOM中生成一些标记,这会使预期的体系结构失调.这是一个例子:

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）。事实上，我没有找到简单/实用的解决方案来解决它引起的所有问题。

我的建议是使用Modernizrload逐步增强旧版 IE 的用户体验。它需要一个更难/更长的过程，因为您必须为每个 CSS3 功能设置一个 polyfill。正如mario.tco已经告诉你的，Modernizr 的仓库中有一个跨浏览器的 polyfill 列表。这是特征检测片段的列表。

另请查看html5please和caniuse。

对于 IE6 和 7，除非您的网站统计数据表明有什么不同，否则平均使用率低于 1%（有一些例外，请检查ie6countdown），因此您几乎可以忽略它们。但是，通过条件注释，您可以针对每个 IE<10 版本指定特定的后备。

请记住，在 IE<9 上，您实际上并不需要盒子阴影和其他视觉装饰（除非它们是可用性所必需的）。事实上，任何回退都可能会导致巨大的性能问题（想想 IE7 用户可能拥有的硬件）。网站不需要在任何浏览器中看起来都完全相同。