Question

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

问题是其他PIE CSS3属性在网站上的所有浏览器中都有效，除了这一个元素，在一个浏览器（IE8）中。

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

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

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

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

enter image description here

任何想法？在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>

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

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

CSS和脚本按此顺序加载：

style.css＆gt; Typekit＆gt; JQuery＆gt; 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);
}

Answer 1

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

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

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

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

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

感谢大家的帮助！

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

1 个答案: