无法让 CSS3Pie 工作

Posted 2023-05-08

【中文标题】无法让 CSS3Pie 工作

【英文标题】：Can't get CSS3Pie to work

【发布时间】：2012-02-28 19:26:33

【问题描述】：

我觉得自己很愚蠢，好像我遗漏了一些非常明显的东西，但我已经检查了很多东西，但无法弄清楚哪里出了问题。我正在尝试使用 CSS3pie 在 ie8 中制作圆角，但它不会占用。

我设置了相对于 html 文档而不是 css 的路径。它在一个名为 pie 的文件夹中，所以这是我在 CSS 中使用的：

#recommended-acc 
float: left;
width: 472px;
background: url(../img/cont_bg.png) repeat;
margin: 10px;
padding: 0 10px 6px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
behavior: url(pie/PIE.htc);
border-radius: 5px;
border: 1px #d8d8d8 solid;
 

有没有人知道更多关于 css3 pie 的信息，可以告诉我我缺少什么？我已经在很多不同的元素上尝试过，但一次都没奏效。

【问题讨论】：

您是否尝试过使用 pie.htc 的服务器相对路径？如果你在 IE Dev Toolbar 中查看页面，刷新后你能看到你的源码中是否有 CSS3-elements 吗？

我会留意这个（我看到你对我的问题发表了评论）。您是否有机会使用 GoDaddy 作为虚拟主机？我正在尝试向后工作，看看是否与我们的问题有任何相似之处。

【参考方案1】：

有几件事可以尝试：

在路径中使用前导正斜杠：

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

这将确保路径正确，以防您位于具有多个 URI 段的页面上，例如 http://example.com/pages/archives/mypage.html。如果没有前导正斜杠，它将是相对于 mypage.html 而不是根目录（它应该是）。

尝试通过将position:relative; 或zoom:1 添加到元素来强制hasLayout（模糊的IE 事物）。这通常是问题所在，正确引用了 HTC 文件，但没有它，样式将不适用。

仔细阅读known issues 页面，确保您没有遇到任何其他常见问题。

【参考方案2】：

我以前也有这些问题。

您必须将 pie.htc 文件通常保存在项目文件夹的根目录中。

我知道下面的解决方案有点奇怪，但你可以试试

尝试在 pie.htc 文件中添加警报或控制台，并将文件放在每个文件夹中，直到它被渲染。

【讨论】：

您可以将 PIE.htc 文件保存在您想要的任何位置，它不必在根目录中。

【参考方案3】：

如何确保您的 HTC 文件加载..

在<script type="text/javascript">下面放alert("test"); 当文件加载时这个警报测试 在你的css文件中输入完整的urlbehavior: url("http://www.yourwebsite.com/test/PIE.htc"); 当您加载页面时，会显示警报:) 这意味着您确定文件已加载:) 现在缩短 behavior: url("relative to the CSS-FILE/PIE.htc"); 并确保您仍然收到警报 删除警报 =)

您现在 100% 确定它正在使用 HTC 文件

【参考方案4】：

我为此苦苦挣扎，我只能建议尝试一下。 使用带有 jQ​​uery 的 Javascript 版本

    <!--[if lt IE 9]>
          <script type="text/javascript" src="js/PIE_IE678.js"></script>
        <![endif]-->
        <!--[if IE 9]>
          <script type="text/javascript" src="js/PIE_IE9.js"></script>
        <![endif]-->

  <!--[if IE]>
            <link rel="stylesheet" type="text/css" href="css/ie.css"/>
            <script>
               $(function() 
                if (window.PIE) 
                    $('.Circle').each(function() 
                        PIE.attach(this);

                      //  alert("Attached");
                    );
                
            );
            </script>

           <![endif]-->

现在在您的 CSS 中，使用 .Circle 类或任何使用 CSS 3 的类，给它们：

缩放：1； 位置：相对；

我在使用 jQuery 和迁移插件时发现的另一个注意事项 - 这些工作有些“挑剔”。

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

如果运气好的话，就可以了。

【参考方案5】：

伙计们，我找到了你要找的问题。 首先，我使用了 2 个不同的网络主机。我自己的 1 个和公司的 1 个。

我在自己的网站上手工编写了完整的 css3 响应式网页设计。我需要 PIE.htc 文件才能使圆角适用于所有 IE 版本，我成功了！

但是，当我将相同的文件上传到我公司的网络主机时，它不再工作了。 事实证明，它们不支持 .htc 文件。 所以我挠了挠头，也没有弄好，但后来我发现这个提供程序可以与 PIE.php 文件一起使用。

所以如果对你来说这不起作用；

.bg 
    border-radius:60px;
    width: 80%;
    height: 85%;
    position: fixed;
    top: 10.2%;
    left: 18%;
    z-index: 1;
    border:3px solid #fff; 
    background:#fff;
    behavior: url(pie/PIE.htc);

比这个还；

.bg 
    border-radius:60px;
    width: 80%;
    height: 85%;
    position: fixed;
    top: 10.2%;
    left: 18%;
    z-index: 1;
    border:3px solid #fff; 
    background:#fff;
    behavior: url(pie/PIE.php);

只需将 PIE.htc 更改为 PIE.php 即可。