为了在 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 已经告诉您的那样,有一个 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 .
关于javascript - css3pie 打乱了 DOM,导致 jQuery 选择器错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14698554/