css3pie扰乱DOM，导致jQuery选择器错误

Question

为了获得CSS3效应(边框半径，框影.)在IE6/7/8上，我使用css3pie。

然而，css3pie在DOM中生成一些css3-container (v1) / css3pie (v2)标记，这破坏了预期的体系结构。下面是一个示例：

CSS

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

<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在IE6/7/8上工作吗？

Answer 1

我也尝试过使用CSS3PIE，并面临类似的问题(主要是jquery和mediaqueries)。事实上，对于它所造成的所有问题，我没有找到容易的/实际的解决办法。

我的建议是使用load逐步增强旧IE的用户体验。它需要一个更难/更长的过程，因为您必须为每个CSS3特性设置一个单一的填充。正如mario.tco已经告诉过你的，在现代化的回购上有一个跨浏览器填充列表。下面是一个特征检测片段列表。

还请看一下html5please和犬科。

关于IE6和7，除非您的站点统计数据表明有什么不同，否则使用率是平均低于1% (除了一些例外，请检查ie6countdown)，所以您几乎可以忽略它们。但是，使用有条件的注释，您可以针对每个IE<10版本进行特定的备份。

请记住，您并不需要在IE<9上设置框影和其他视觉装饰(除非它们是可用性所必需的)。事实上，任何退步都可能会导致巨大的性能问题(想想看IE7用户可以拥有什么样的硬件)。在任何浏览器中都需要完全相同的外观。

Answer 2

CSS3PIE是一种非常有用和强大的方法来模拟CSS3圆角--在我的公司中，它是我们选择的方法，但是还有很多其他的方法。

CSS3PIE创建圆角的方式--它将把<css3-container>标记创建为具有行为属性的元素的前一个同级，因此它将更改DOM结构并中断prev()调用。css容器很重要，因为它是<pre>标记后面圆角背景的VML绘图。

您可以这样做的一种方法是将<pre>标记封装在类似于<div>的其他东西中，然后使用该<div>使用prev()函数导航DOM。

您可以这样做的另一种方法是创建这样一个jQuery插件

/* This adds a plugin prevPie and nextPie - it is the same as the
   existing prev and next, but it will ignore css3-containers. */
(function($){
    function addPlugin(name) {
        $.fn[name + 'Pie'] = function() {
            var result = [];
            this[name]().each(function(i,el){
                if (el.tagName == 'css3-container') {
                    var val = $(el)[name]()[0];
                    val && result.push(val);
                } else {
                    result.push(el);
                }
            });
            return $(result);
        }
    }
    addPlugin('prev');
    addPlugin('next');
})(jQuery);

现在，以下内容应该按照您的要求在所有浏览器中工作。

// undefined        expected: getme
alert($("pre").prevPie().attr("class"));
// css3-container   expected: p
alert($("pre").prevPie()[0].tagName);

// getme            expected: foo
alert($("pre").prevPie().prevPie().attr("class"));
// P                expected: div
alert($("pre").prevPie().prevPie()[0].tagName));

Answer 3

你试过这个吗？

http://blog.reybango.com/2010/10/11/how-polyfills-fill-in-the-gaps-to-make-html5-and-css3-usable-today/

以下是可用于其他功能的多填充的列表：

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills