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。