在 IE8 中缺少 PIE 线性渐变行为（但在 IE7 和 IE9 中工作）答案

【问题标题】：Missing PIE linear-gradient behavior in IE8 (but working in IE7 and IE9)在 IE8 中缺少 PIE 线性渐变行为（但在 IE7 和 IE9 中工作）
【发布时间】：2013-02-17 19:52:20
【问题描述】：

我正在使用 CSS3 属性来设置导航样式。我正在使用 background-image: linear-gradient 它适用于所有现代浏览器，但在 IE7-8 中缺乏支持。我依靠 PIE（v1，http://css3pie.com）在旧版 IE 7 和 8 中实施。我尝试了 PIE 2 beta，但它对我不起作用。

问题是 PIE CSS3 的其余属性在站点上的所有浏览器中都有效，除了这一元素，在一个浏览器 (IE8) 中。

“last”类应用于容器#navigation 中的最后一个顶级<li> 元素。这发生在 document.ready() 的 JavaScript 中，并且在 CSS 中 li.last 具有绿色渐变背景。我尝试将 JS 移到 document.ready() 之外，使其立即触发，并尝试将其放在 window.load() 中，以便在 TypeKit 之后触发，对结果均无影响。

此元素的 background-image 属性在 IE9 中按预期工作。它甚至可以在 IE7 中按预期工作。但是在 IE8 中，nada。页面中依赖 PIE 实现线性渐变和其他 CSS3 属性的所有其他元素都可以正常加载。

但是对于这个特定的元素，由于某种原因没有应用线性渐变背景图像。我在想这是因为 PIE 行为在我的 JavaScript 可以应用最后一个类之前运行，因为当我检查时，我确实看到其余属性（字体大小、颜色、浮点数）都已应用。这不是类继承的问题，因为其他<li> 元素没有使用任何背景属性设置样式。

这里是堆叠的屏幕截图（IE9、IE8、IE7）：

有什么想法吗？ 有没有办法在 JS 可以应用 last 类之前延迟 PIE 行为的加载？这甚至是问题吗？我很困惑，因为它在 IE7 中运行...感谢您的任何见解。

这是我的 HTML（由 WordPress 生成）：

<div id="navigation">
<ul>
<li id="menu-item-117" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item"><a href="#">Home</a></li>
<li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Who We Are</a></li>
<li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Tree Projects</a></li>
<li id="menu-item-130" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">News + Resources</a></li>
<li id="menu-item-136" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Order Online</a></li>
<li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Contact</a></li>
<li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Give Now</a></li>
</ul>
</div>

这里是 JavaScript（用于将“last”类应用到 #navigation 中的最后一个顶级 <li>）：

$(document).ready( function(){
    $("#navigation > ul > li:last").addClass("last");
});

CSS 和脚本按以下顺序加载：

style.css > Typekit > JQuery > site.js（应用了“last”）

这是我的相关 CSS：

#navigation ul,
#navigation li {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#navigation > ul {
    width: 100%;
}

#navigation ul li ul {
    display: none;
}

#navigation li {
    margin: 0 6px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-weight: 600;
    float: left;
    border-radius: 3px;
    zoom: 1;
}

#navigation a {
    color: #55D600;
    display: inline-block;
    padding: 11px 11px;
}

#navigation li.current-page-ancestor > a,
#navigation li.current-menu-ancestor > a,
#navigation li.current-menu-item > a {
    color: #fff;
}

#navigation li.last {
    margin: 0;
    float: right;
    background: rgb( 51, 171, 0 );
    background-image: linear-gradient(bottom, rgb(51,171,0) 0%, rgb(86,214,0) 75%);
    background-image: -o-linear-gradient(bottom, rgb(51,171,0) 0%, rgb(86,214,0) 75%);
    background-image: -moz-linear-gradient(bottom, rgb(51,171,0) 0%, rgb(86,214,0) 75%);
    background-image: -webkit-linear-gradient(bottom, rgb(51,171,0) 0%, rgb(86,214,0) 75%);
    background-image: -ms-linear-gradient(bottom, rgb(51,171,0) 0%, rgb(86,214,0) 75%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(51,171,0)),
        color-stop(0.75, rgb(86,214,0))
    );
    -pie-background: linear-gradient( rgb(86,214,0), rgb( 51, 171, 0) );
    color: #eee;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    width: 116px;
    font-size: 1.2em;
}

#navigation li.last a {
    color: #fff;
}

#navigation a:hover {
    color: #fff;
}

#navigation li.last:hover {
    background: rgb( 58, 193, 0 );

    background-image: linear-gradient(bottom, rgb(58,193,0) 0%, rgb(94,223,3) 75%);
    background-image: -o-linear-gradient(bottom, rgb(58,193,0) 0%, rgb(94,223,3) 75%);
    background-image: -moz-linear-gradient(bottom, rgb(58,193,0) 0%, rgb(94,223,3) 75%);
    background-image: -webkit-linear-gradient(bottom, rgb(58,193,0) 0%, rgb(94,223,3) 75%);
    background-image: -ms-linear-gradient(bottom, rgb(58,193,0) 0%, rgb(94,223,3) 75%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(58,193,0)),
        color-stop(0.75, rgb(94,223,3))
    );
    -pie-background: linear-gradient( rgb(94,223,3), rgb( 58, 193,0) );
    font-size: 1.2em;
    color: #fff;
}

#navigation,
#navigation li {
    behavior: url(js/PIE.htc);
}

【问题讨论】：

它是否在静态页面上工作，其中.last 被添加到服务器端？（顺便说一句，为什么不添加服务器端？）
题外话，只是说jQuery代码在大多数浏览器中是不必要的，因为你可以在你的CS中使用li:last-of-type选择器，所以你不需要last类。遗憾的是，您确实在 IE7/8 中仍然需要它，但您可以使用 Selectivizr 之类的 polyfill 来帮助解决这个问题。
我的猜测是绿色渐变正在完成，但它在菜单其余部分的渐变后面呈现。您可能可以通过禁用背景来测试它来证明这一点。不知道如何解决它，但zoom:1 hack 可能会有所帮助。
但你知道，我是 css3pie 的忠实粉丝，但在这种情况下，看着这些截图，我会认为根本不使用它。 'Give Now' 的纯绿色背景可能看起来不如渐变好，但它会足够接近，特别是如果只有 IE7/8 可以看到它。如果不出意外，你绝对应该设置一个绿色的后备颜色，因为一些 IE 用户禁用了 CSS3Pie 依赖的功能。
@Spudley，确实如此，你会看到我确实在线性梯度声明上方设置了background: rgb(51,171,0);，但它似乎被忽略或覆盖了。

标签： javascript jquery css3pie

【解决方案1】：

感谢 cmets 中 @FelipeAls 和 @Spudley 的见解，我得以解决这个问题。

使用@FelipeAls 的建议，我将该类硬编码到 WordPress 的菜单编辑器中，并删除了应用该类的 JavaScript。这有助于确保应用类并呈现 PIE 行为。但是，问题仍然存在。

@Spudley 走在了正确的轨道上，这让我找到了 PIE 的 known issues doc。就像将position: relative; 添加到#navigation li.last 一样简单。

#navigation li.last {
    [...]
    position: relative;
}

我不知道我是怎么错过这个的，因为我今天早些时候实际上是在“已知问题”页面上试图诊断为什么 v2.0 无法识别自定义 JavaScript 路径。

感谢大家的帮助！

【讨论】：