CSS3 PIE не работает должным образом в IE8

Я использую CSS3 PIE для рендеринга изображения границы и ширины границы в IE. В IE9 все работает нормально, а в IE8 нет.

Как ни странно, в IE8 border-image/width работает для одного DIV (список рассылки в правом верхнем углу страницы), но не для других (основной контент и боковая панель, для которых не отображается ни border-image, ни background-image). ).

Вы можете увидеть, что я имею в виду, на этой странице.

Пример CSS, который я использую (в данном случае для содержимого DIV), выглядит следующим образом:

div#content .padder {
    border-width:7px;
    -moz-border-image:url('/wp-content/themes/bp-soteria/images/background_content.png') 7 repeat;
    -webkit-border-image:url('/wp-content/themes/bp-soteria/images/background_content.png') 7 repeat;
    border-image:url('/wp-content/themes/bp-soteria/images/background_content.png') 7 repeat;
    -o-border-image:url('/wp-content/themes/bp-soteria/images/background_content.png') 7 repeat;
    background-image:url('/wp-content/themes/bp-soteria/images/background-main.png');
    background-repeat: repeat;
    background-clip: padding-box;
    behavior: url(/pie/PIE.htc);
}

Путь к PIE.htc правильный. Кто-нибудь может подсказать, в чем здесь проблема?


person Nick    schedule 24.09.2012    source источник
comment
Я очистил кеш и все еще вижу ту же проблему   -  person Nick    schedule 24.09.2012
comment
Что ты хочешь этим сказать? CSS не выглядит правильным для вас?   -  person Nick    schedule 24.09.2012
comment
Попробуйте установить position: relative для элементов, над которыми PIE не работает.   -  person daGUY    schedule 25.09.2012
comment
Спасибо, теперь работает. Странно, в IE7 это работало без position:relative. Вы добавите ответ, который я могу отметить как правильный?   -  person Nick    schedule 25.09.2012


Ответы (2)


Спецификации PIE говорят:

make the target element position:relative, or
make the ancestor element position:relative and give it a z-index.

Известные проблемы

person defau1t    schedule 31.10.2012

Попробуйте использовать путь относительно корня вашего сайта. Это единственное, что сработало для меня.

behavior: url(/your/path/to/PIE.htc);

Следующее не сработало для меня

behavior: url(PIE.htc);
behavior: url(../../some/path/to/PIE.htc);
person asiby    schedule 28.12.2012