0

CSS3プロパティを使用してナビゲーションのスタイルを設定しています。私はbackground-image：linear-gradientを使用しています。これはすべての最新のブラウザーで機能しますが、IE7-8ではサポートされていません。古いIE7および8での実装をPIE（v1、 http：//css3pie.com ）に依存しています。PIE2ベータ版を試しましたが、機能しませんでした。

問題は、残りのPIE CSS3プロパティが、この1つの要素を除いて、サイト上のすべてのブラウザーで1つのブラウザー（IE8）で機能していることです。

「last」のクラスは、コンテナ内の最後の最上位<li>要素に適用され#navigationます。これはdocument.ready()、CSSのJavaScriptで発生します。li.lastの背景は緑色です。JSをdocument.ready（）の外に移動してすぐに起動するwindow.load()ようにし、TypeKitの後に起動するように配置してみましたが、どちらも結果に影響しませんでした。

この要素のbackground-imageプロパティは、IE9で期待どおりに機能します。IE7でも期待どおりに機能します。しかし、IE8では灘。線形グラデーションおよびその他のCSS3プロパティをPIEに依存するページ内の他のすべての要素は、すべて正常に読み込まれます。

ただし、この特定の要素の場合、線形グラデーションの背景画像は何らかの理由で適用されません。これは、JavaScriptが最後のクラスを適用する前にPIEの動作が実行されるためだと思っていました。検査すると、残りのプロパティ（font-size、color、float）がすべて適用されていることがわかります。<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」をの最後のトップレベルに適用するために使用されます<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);
}
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 に答える