Отсутствует поведение линейного градиента PIE в IE8 (но работает в IE7 и IE9)

Question

Я использую свойства CSS3 для стилизации моей навигации. Я использую background-image: linear-Gradient, который работает во всех современных браузерах, но отсутствует поддержка в IE7-8. Я полагаюсь на PIE (v1, http://css3pie.com/) для реализации в более старых версиях IE 7 и 8. Я попробовал бета-версию PIE 2, но она не работала для меня.

Проблема в том, что остальные свойства PIE CSS3 работают во всех браузерах по всему сайту, кроме этого одного элемента, в одном браузере (IE8).

Класс "последний" применяется к последнему верхнему уровню <li> элемент в контейнере #navigation, Это происходит в JavaScript в document.ready() а в CSS li.last имеет зеленый градиентный фон. Я попытался переместить JS за пределы document.ready(), чтобы он сразу запускался, а также попытался поместить его в window.load() поэтому он срабатывает после TypeKit, не влияя на результат.

background-image свойство для этого элемента работает, как и ожидалось в IE9. Это даже работает, как и ожидалось в IE7. Но в IE8 нада. Все другие элементы на странице, которые используют PIE для линейного градиента и других свойств CSS3, все загружаются нормально.

Но для этого конкретного элемента линейное градиентное фоновое изображение по какой-то причине не применяется. Я думал, что это потому, что поведение PIE запускается до того, как мой JavaScript может применить последний класс, потому что, когда я проверяю, я вижу, что все остальные свойства (font-size, color, float) были применены. Это не проблема наследования классов, потому что другие <li> элементы не имеют каких-либо свойств фона.

Вот скриншоты с накоплением (IE9, IE8, IE7):

Есть идеи? Есть ли способ отложить поведение PIE до того, как JS сможет применить класс last? Это даже проблема? Я очень озадачен, потому что он работает в 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 (используется для применения класса "последний" к последнему верхнему уровню <li> в #navigation ):

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

CSS и скрипты загружаются в следующем порядке:

style.css> Typekit> JQuery> site.js (где применяется "последний")

Вот мой соответствующий 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 был на правильном пути, и это привело меня к поиску документа по известным проблемам для PIE. Это было так просто, как добавление position: relative; в #navigation li.last,

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

Я не знаю, как я пропустил это, так как на самом деле был на странице известных проблем ранее сегодня, пытаясь выяснить, почему v2.0 не распознавал пользовательские пути JavaScript.

Спасибо всем за вашу помощь!