6

为了在 IE 6/7/8 上获得 CSS3 效果（边框半径、框阴影...），我使用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 上运行？

4

5 回答 5

3

我也尝试过使用 CSS3PIE，但遇到了类似的问题（主要是 jquery 和 mediaqueries）。事实上，我发现它导致的所有问题都没有简单/实用的解决方案。

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

也看看html5please和caniuse。

关于 IE6 和 7，除非您的站点统计数据显示不同，否则平均使用率低于 1%（有一些例外，请查看ie6countdown），因此您几乎可以忽略它们。但是，使用条件注释，您可以针对每个 IE<10 版本使用特定的回退。

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

于 2013-02-13T11:12:25.280 回答
2

你有没有试过这个：

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

以下是可用于其他功能的 polyfill 列表：

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

于 2013-02-08T16:56:17.577 回答
2

CSS3PIE 是一种非常有用且强大的模拟 CSS3 圆角的方法 - 在我的公司中，我们选择了它，但还有许多其他方法可以做到这一点。

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

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

您可以这样做的另一种方法是创建一个像这样的 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));
于 2013-02-05T03:08:08.773 回答
1

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

当您必须遍历 DOM 时， jQuery 的大多数（如果不是全部）遍历方法都包含一个过滤器选择器参数，您可以使用它来排除 PIE 的元素，例如：

$("pre").prevUntil('*', 'not(css3-container)')

$("body").children('not(css3-container)')
于 2013-02-07T08:57:58.190 回答
0

而不是只使用原始prev()添加一个 CSS 选择器来缩小搜索范围

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

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

编辑

将prev()函数调用更改为prevUntil()

于 2013-02-05T01:30:39.987 回答