CSS3 Pie 根本不工作，尝试了一切

Posted 2023-05-08

【中文标题】CSS3 Pie 根本不工作，尝试了一切

【英文标题】：CSS3 Pie not working at All, tried everything

【发布时间】：2012-02-09 19:14:57

【问题描述】：

我正在尝试申请css3pie

到我的网站， 它似乎根本没有应用。 我已经尝试了我能找到的任何东西：

检查了 PIE.htc 的路径，将它放在主文件夹并使用 url(/PIE.htc)，甚至尝试了完整的 URL，但没有任何效果。 用 PIE.php 试过了，也没用。 尝试在 .htaccess 文件中添加“AddType text/x-component .htc”，不行 尝试添加position:relative; z-index: 0;，不行。

我要申请的代码是：

   -webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.9);
 -moz-box-shadow: 0px 0px 13px rgba(0,0,0,.9);
 box-shadow: 0px 0px 13px rgba(0,0,0,.9);

我错过了什么？

编辑： 如果这很重要，当我在 IE 中查看加载的 css 时，我看到行为命令与下一个命令在同一行，尽管语法是正确的

【问题讨论】：

您找到解决方案了吗？我遇到了同样的问题，这里没有任何建议可以解决正在发生的事情。

我知道这已经晚了。有同样的问题，但有圆角......无法让它工作。发现这是因为我使用的是 2.0 beta 版本。我猜必须坚持坚如磐石的 1.0。

【参考方案1】：

使用您的网站链接。例如：

behavior: url('http://www.yoursite.com/css/PIE.php')

它会正常工作的。

【参考方案2】：

使用 Web 开发工具 (F12) 查看是否有任何 <css3-container> 元素正在创建中。如果没有，那么您的 behaviour css 声明就有问题。如果这些元素存在，那么不要对您的 PIE.htc 进行任何更改——这是一个样式问题，您可以使用 position:relative; z-index: 0; 之类的东西。

【讨论】：

那么，你没有得到任何<css3-container> 元素吗？是不是特别是 box-shadow 坏了，还是你尝试过其他元素？

这一定与路径有关。你能检查你是否有任何错误吗？您可以分享该网站的公共链接吗？

我玩过（不确定我做了什么），我确实看到了 但仍然无法正常工作。

抱歉，没有更多的代码，我很难判断哪里出了问题。看看你是否可以使用jsfiddle.net

创建一个最小的测试用例

【参考方案3】：

CSS3PIE 将其生成的元素放置为您正在设置样式的元素的同级元素，z-index 值为 -1。 您可能看不到结果，因为它位于文档中其他元素的后面。尝试将您正在样式化的元素包装在具有独立 z-index 的定位容器中。 希望这会有所帮助！

【讨论】：

就像这个人说的，尝试给元素位置：相对，也许还有一个 z-index。这已经解决了我几次的问题。

【参考方案4】：

这完全取决于您的服务器设置：

假设 DIR“pie”相对于您的“根”DIR，请尝试以下操作之一：

    behavior: url(/pie/PIE.php);
    behavior: url(pie/PIE.php);

也试试：

    position:relative; 
    z-index: 0;

不要在 PIE 中使用 IE 过滤器，例如：

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0074a8',endColorstr='#006496',GradientType=0);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

【参考方案5】：

当您尝试使用模糊时，CSSPie3 不支持 box-shadow。这是不可能的。

相反，移除模糊，您的 box-shadow shim 将起作用。

查看这里的来源：

http://css3pie.com/forum/viewtopic.php?f=3&t=991

http://css3pie.com/documentation/supported-css3-features/

不幸的是，PIE 仅支持 box-shadow 中的 rgba 不透明度，如果它有 没有模糊。

http://css3pie.com/documentation/suppor ... ures/#rgba

通常只需使用打火机即可解决此问题 不透明颜色的阴影。如果你想让其他浏览器使用 rgba，您可以使用 -pie-box-shadow 仅针对 PIE 覆盖它。

【讨论】：

很好的信息谢谢。但我改变了它，仍然没有结果，好像它根本不起作用。我目前正在尝试使用绝对路径 http 和 PIE.php 以及相同的结果

【参考方案6】：

尝试使用十六进制值表示法代替颜色。在文档中它说使用 rgba 表示法存在限制：

box-shadow: 0px 0px 13px #000;
filter: Alpha(Opacity=90);
opacity: 0.9;
behavior: url(/Pie.htc);

【参考方案7】：

我遇到了同样的问题。 PIE 根本不起作用，无论是 htc、js 还是 php。问题在于我下载并解压缩的 PIE 文件夹的 Mac 服务器访问权限。它被设置为每个人都无法访问。将访问权限更改为只读，现在它可以工作了！菜鸟失误。 :)

【参考方案8】：

不要将它与 css3pie 一起使用：

 filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#', endColorstr='#')";

我的问题解决了