CSS3 PIE 在 IE8 中无法正常工作

Posted 2023-05-08

【中文标题】CSS3 PIE 在 IE8 中无法正常工作

【英文标题】：CSS3 PIE not working properly in IE8

【发布时间】：2012-09-16 07:34:18

【问题描述】：

我正在使用 CSS3 PIE 在 IE 中呈现边框图像和边框宽度。在 IE9 中一切正常，但在 IE8 中却不行。

奇怪的是，在 IE8 中，边框图像/宽度适用于一个 DIV（页面右上角的邮件列表），但不适用于其他 DIV（主要内容和侧边栏，没有边框图像或背景 -图片正在显示）。

你可以在this page上看到我的意思。

我正在使用的 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 的路径是正确的。任何人都可以提出这里的问题吗？

【问题讨论】：

我已经清除了缓存，仍然看到同样的问题

这是什么意思？ CSS 看起来不正确吗？

尝试在 PIE 无法处理的元素上设置 position: relative。

谢谢，现在可以了。奇怪的是，它在没有position:relative 的情况下在 IE7 中工作。你会添加一个我可以标记为正确的答案吗？

【参考方案1】：

PIE 规范说：

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

Known Issues

【参考方案2】：

尝试使用相对于您网站根目录的路径。这是唯一对我有用的东西。

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

以下内容对我不起作用

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