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

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，但是我工作的服務器不支持它，因此我無法更改它：/

編輯：我正在使用Visual Lightbox在一頁中包含一個庫。 該頁面不會顯示此問題，但是其他頁面僅顯示文本。 也許有幫助嗎？

編輯：好的，盡管我真的不知道為什么會工作，但我設法解決了這個問題。 如果我在標題部分中加載jquery腳本，則CSS效果加載就很好。 我覺得那很奇怪。 有人有什么想法嗎？

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

Answer 1

使用PIE時的主要問題是它通常需要一個position:relative; 在您的元素上以及在父元素上，因為VML獲得position:absolute; 。 我不確定position：relative;是否能很好地工作。

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