IE8でウィンドウサイズ変更後にのみ表示されるCSSエフェクト

Question

IE8で基本的なWebサイトをコーディングし、CSS3PIEを使用してエッジエッジとグラデーションエフェクトを有効にしています。私の問題は、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でコードをインポートするときに、問題が解消されません。

アイデア？

EDIT：ソリューションを提供できない場合は、複数のページにコードの塊を含める別の方法を提供できますか？私はPhPとSSIを見てきましたが、私が扱っているサーバーはサポートしていませんし、変更することはできません：/

EDIT：私はVisual Lightboxを使って1ページにギャラリーを含めています。そのページにはこの問題は表示されませんが、コンテンツとしてのテキストだけを持つ他のユーザーはこの問題を表示します。多分それが助けますか？

編集：[OK]私は本当になぜそれが動作するのかわからないが、問題を解決するために管理している。ヘッダーセクションにjqueryスクリプトをロードすると、CSSエフェクトはうまくロードされます。私はそれが本当に変だと分かります。誰でも考えがありますか？

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

Answer 1

あなたはPIEを使用している主な問題は、VMLがposition:absolute;を取得するので、それは通常、親のあなたの要素にもposition:relative;が必要だということです。私はそれがポジションでうまくいくかどうかはわかりません：相対;

これはPIEをもう少し理解するのに役立ちます。