CSS-эффекты появляются только после изменения размера окна в IE8 - PullRequest
Новая
       25

CSS-эффекты появляются только после изменения размера окна в IE8

0 голосов
/ 15 ноября 2011

Я кодирую базовый веб-сайт и использую 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>

1 Ответ

0 голосов
/ 25 ноября 2011

Основная проблема при использовании PIE состоит в том, что ему обычно требуется position:relative; для вашего элемента, а также для родительского элемента, поскольку VML получает position:absolute;.Я не уверен, что это хорошо работает с позицией: относительный;.

Надеюсь, это поможет немного лучше понять ПИРОГ.

...