CSS 效果仅在 IE8 中调整窗口大小后出现答案

【问题标题】：CSS effects only appearing after window resize in IE8CSS 效果仅在 IE8 中调整窗口大小后出现
【发布时间】：2011-11-15 13:40:33
【问题描述】：

我正在编写一个基本网站并使用 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>

【问题讨论】：

我怀疑它会解决您的问题，但您需要关闭导致这种结构的行：<table> <tr> <td> content </td> </tr> </table>。
感谢蒂姆，但你是对的，它没有解决我的问题 :(
我很乐意帮助你，但我以前从未遇到过这种情况，除非你使用窗口调整大小事件，否则没有理论上的解释，但如果你愿意，你可能会知道问题出在哪里。非常抱歉。

标签： javascript internet-explorer-8 css3pie

【解决方案1】：

使用 PIE 时的一个主要问题是，它通常需要在您的元素和父元素上使用 position:relative;，因为 VML 得到 position:absolute;。我不确定它是否适用于 position:relative;.

我希望这有助于更多地了解 PIE。

【讨论】：