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

为了在IE 6/7/8上获得CSS3效果（边框半径、框阴影…），我使用了

css3pie

然而，css3pie在DOM中生成了一些

css3容器（v1）/css3pie（v2）

标记，这扰乱了预期的体系结构。以下是一个例子：

CSS

pre{
边框：1px实心#aaa；
边界半径：5px；
行为：url（pie.htc）；
}

HTML

条
段落
$("pre").prevUntil('p').attr("class");
// OR
$("pre").prevUntil('.paragraph').attr("class");

实际生成的源如下所示：

条
段落
预定义格式

有没有人遇到过这样的问题？有解决办法吗？有没有替代css3pie的方法让CSS3在IE 6/7/8上工作？
而不是只使用原始的
prev（）
向其添加CSS选择器以缩小搜索范围

/* 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);

如果您打算使用CSS3“hack”来使IE 6/7/8正确运行，那么在遍历DOM时不要尝试依赖预期的DOM结构，尝试更具体一些

编辑

将
prev（）
函数调用更改为
previtil（）
CSS3PIE是模拟CSS3圆角的一种非常有用和强大的方法，在我的公司，这是我们选择的方法，但还有许多其他方法可以实现

CSS3PIE创建圆角的方式将创建
标记作为具有行为属性的元素的前一个同级，因此它将更改DOM结构并中断
prev（）
调用。css容器很重要，因为它是

// 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));

现在，在所有浏览器中，下面的内容都应该像您希望的那样工作

这可能不是您想要的答案，但我建议（重新）编写jQuery以更多地使用类/ID，减少对页面结构的依赖，而不是试图让jQuery忽略PIE的注入元素。这样做的好处是使您的代码对其他页面结构更改更具弹性，并且使您的代码更具可移植性和可重用性

当您必须遍历DOM时，大多数（如果不是全部的话）都会包含一个过滤器选择器参数，您可以使用该参数排除饼图的元素，例如：

你试过这个吗：


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

我也尝试过使用CSS3PIE，但遇到了类似的问题（主要是jquery和mediaqueries）。事实上，我没有找到简单/切实可行的解决方案来解决它所造成的所有问题

我的建议是使用它来逐步增强旧IE的用户体验。这需要一个更难/更长的过程，因为您必须为每个CSS3功能设置一个polyfill。正如mario.tco已经告诉你的，Modernizer的回购协议有一个问题。下面是一个片段列表

也有一个看和

关于IE6和IE7，除非您的站点统计数据表明有不同之处，否则使用率是（除了一些例外，请检查），所以您几乎可以忽略它们。但是，您可以将每个IE
prev（'p'）
或
prev（'.paration'）
作为目标，因为
jQuery-reference:prev（）-获取**立即**前面的兄弟姐妹…
应该使用
previtil
。但是…如果prev元素未知怎么办？感谢您指出-我更新了我的答案-在这个例子中，我认为如果在您开始操作之前要更改DOM结构，您可能需要更少地依赖它。您的插件可以解决这个特定的
prev
问题。但是css3pie仍然存在很多问题，它影响到几乎所有的jQuery选择器……例如<代码>$（“body”）.children（）.size（）
将返回4，而不是我的示例中的3。编写一个插件来修复所有这些错误似乎不是一个完美的解决方案。是的，一般来说，我知道在使用css3pie时使用这些类型的选择器不是一个好主意。测试代码时，请确保每次都测试IE，因为存在这些问题。您可能需要做的一件事是为需要查找或计数的大多数元素提供类名，并在选择器中使用这些类名，这样无论这些额外的css3容器元素如何，它都将始终工作。感谢您的回复，codefactor。但问题是，有时我们不知道id/类，prev元素可能完全未知。至于圆角和阴影，我可以做一些额外的工作，为IE6/7/8编写一个使用图像的插件，但它真的没有那么绝望。因此，在有人提出一个完美的解决方案之前，我想我将不得不从我的应用程序中删除css3pie。@user1643156对于一个不影响DOM结构的完美解决方案，请不要屏息等待。我见过的在非CSS3浏览器上实现圆角的所有其他自动化方法都以某种方式改变了DOM结构。如果不添加一些额外的元素，在非CSS3浏览器上就永远不会有一个完美的圆角解决方案。否则，您将被迫更改HTML标记，而根本不使用CSS3，因此DOM结构在所有浏览器中都是相同的，这是不值得的。微软不支持IE6和IE7，那么你为什么要100%支持它们呢？：）但说真的，圆角对使用浏览器的人来说是不是很重要，而大多数互联网浏览器看起来都很糟糕？使用圆角将影响性能，并可能使网站在旧IE中无法使用。似乎这是一个无法解决的问题，只要我们想在旧浏览器上看到别致的外观。正如@naugtur所说，我实际上已经从我的项目中删除了css3pie……这不值得。嗯……我不得不选择一个答案来接受，你提供的信息似乎很有用。
$("pre").prevUntil('*', 'not(css3-container)')

$("body").children('not(css3-container)')