0

基本的な Web サイトをコーディングし、CSS3PIE を使用して IE8 で丸みを帯びたエッジとグラデーション効果を有効にしています。私の問題は、javascript を使用してコードの一部 (ナビゲーション バー) をインポートするときです。IE8 でページを読み込むと、効果が表示されません。ページのサイズを変更した場合にのみ、効果が表示されます。これは、コードがドキュメント内でインラインになっている場合には発生しません。

これが私のナビゲーションバーコードです：

    <table class="Nav_Bar">
    <tr>
        <td class="Nav_Bar_L1">
        Heading 1</td>

    <tr>
        <td class="Nav_Bar_L2">
            SubHeading 1</td>

    <tr>
        <td class="Nav_Bar_L3">
            SubSubHeading 1</td>

    <tr>
        <td class="Nav_Bar_L1">
            Heading 2</td>

    <tr>
        <td class="Nav_Bar_L2">
            SubHeading 2</td>

    <tr>
        <td class="Nav_Bar_L3">
            SubSubHeading 2</td>

</table>

そして私のJavaScript呼び出し：

<script type="text/javascript" language="javascript" src="includes/nav_bar.js">
</script>

そして私のCSS：

.Nav_Bar {
cellspacing: 5px;
}

.Nav_Bar_L1 {
font-size: 14px;
font-family: Helvetica, Arial, sans serif;
width: 198px;
padding: 5px 0px 5px 20px;
background: -moz-linear-gradient(top, #669900, #FFFFFF);
background: -webkit-gradient(linear, left top, left bottom, from(#669900), to(#FFFFFF));
font-weight: bold;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.Nav_Bar_L2 {
font-size: 14px;
font-family: Helvetica, Arial, sans serif;
padding: 5px 0px 5px 30px;
background: -moz-linear-gradient(top, #99CCFF, #FFFFFF);
background: -webkit-gradient(linear, left top, left bottom, from(#99CCFF), to(#FFFFFF));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.Nav_Bar_L3 {
font-size: 14px;
font-family: Helvetica, Arial, sans serif;
padding: 5px 0px 5px 40px;
background: -moz-linear-gradient(top, #CCCCCC, #FFFFFF);
background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#FFFFFF));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

そして私のIE固有のCSS：

.Nav_Bar_L1 {
    border-radius: 5px;
    -pie-background: linear-gradient(#669900, #FFFFFF);
    behavior: url(PIE/PIE.htc);
}

.Nav_Bar_L2 {
    border-radius: 5px;
    -pie-background: linear-gradient(#99CCFF, #FFFFFF);
    behavior: url(PIE/PIE.htc);
}

.Nav_Bar_L3 {
    border-radius: 5px;
    -pie-background: linear-gradient(#CCCCCC, #FFFFFF);
    behavior: url(PIE/PIE.htc);
}

そして最後に私のJavaScriptファイル：

document.write('<table class="Nav_Bar">             ');
document.write('    <tr>                            ');
document.write('        <td class="Nav_Bar_L1">     ');
document.write('        Heading 1</td>              ');
document.write('                                    ');
document.write('    <tr>                            ');
document.write('        <td class="Nav_Bar_L2">     ');
document.write('            SubHeading 1</td>       ');
document.write('                                    ');
document.write('    <tr>                            ');
document.write('        <td class="Nav_Bar_L3">     ');
document.write('            SubSubHeading 1</td>    ');
document.write('                                    ');
document.write('    <tr>                            ');
document.write('        <td class="Nav_Bar_L1">     ');
document.write('            Heading 2</td>          ');
document.write('                                    ');
document.write('    <tr>                            ');
document.write('        <td class="Nav_Bar_L2">     ');
document.write('            SubHeading 2</td>       ');
document.write('                                    ');
document.write('    <tr>                            ');
document.write('        <td class="Nav_Bar_L3">     ');
document.write('            SubSubHeading 2</td>    ');
document.write('                                    ');
document.write('</table>                            ');

繰り返しますが、javascript を使用してコードをインポートした場合にのみ、問題が解決しません。

何か案は？

編集:おそらく解決策を提供できない場合は、複数のページにコードのチャンクを含める別の方法を提供できますか? 私は PhP と SSI を見てきましたが、私が使用しているサーバーはそれをサポートしておらず、それを変更することはできません:/

編集: Visual Lightbox を使用して、1 つのページにギャラリーを含めています。そのページにはこの問題は表示されませんが、コンテンツとしてテキストのみの他のページには表示されます。多分それは役立ちますか？

編集:OK、問題を解決できましたが、なぜ機能するのか本当にわかりません。ヘッダー セクションに jquery スクリプトをロードすると、CSS エフェクトが正常にロードされます。それは本当に奇妙だと思います。誰にも考えはありますか？

<script src="path/jquery.min.js" type="text/javascript"></script>
4

1 に答える 1

0

PIE を使用している場合の主な問題はposition:relative;、VML がposition:absolute;. position:relative; でうまく機能するかどうかはわかりません。

これが PIE をもう少し理解するのに役立つことを願っています。

于 2011-11-25T09:57:41.043 に答える