僅在IE8窗口大小調整後出現CSS效果

Question

我正在編寫一個基本網站，並使用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，但我工作的服務器不支持它，我無法更改：/

編輯：我正在使用可視燈箱將畫廊包含在一個頁面中。該頁面不會顯示此問題，但其他人僅以文本爲內容。也許這有幫助？

編輯：好的我設法解決這個問題，雖然我真的不知道它爲什麼工作。如果我在頁眉部分加載jquery腳本，CSS效果加載就好了。我覺得很奇怪。任何人有任何想法？

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

Answer 1

當您使用PIE一個主要的問題是，它通常需要position:relative;你的元素，也對父母因爲VML得到position:absolute;。我不確定它是否與位置一樣好：相對;。

我希望這有助於更多地理解PIE。