0

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

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

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

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

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

以下是堆叠的屏幕截图（IE9、IE8、IE7）：

在此处输入图像描述

有任何想法吗？有没有办法在 JS 可以应用最后一个类之前延迟加载 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>

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

$(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);
}
4

1 回答 1

0

感谢@FelipeAls 和@Spudley 在评论中的见解，我能够解决这个问题。

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

@Spudley 走在了正确的轨道上，它让我找到了这个PIE 的已知问题文档。就像添加position: relative;到#navigation li.last.

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

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

感谢大家的帮助！

于 2013-02-18T00:54:41.480 回答