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

为了在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上正常工作吗？

最佳答案

我也尝试过使用CSS3PIE，并且遇到了类似的问题(主要是jquery和mediaqueries)。实际上，我发现没有简单/可行的解决方案可以解决所有问题。

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

还可以看看html5please和caniuse。

关于IE6和IE6，除非您的网站统计信息表明有所不同，否则使用率为below 1% on average(除某些异常(exception)，请检查ie6countdown)，因此您几乎可以忽略它们。但是，通过conditional comments，您可以针对每个IE
请记住，在IE Websites don't need to look exactly the same in any browser。

关于javascript - css3pie弄乱了DOM，导致jQuery选择器错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14698554/

CSS3Pie

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