CSS3 PIE - 给 IE 边框半径支持不起作用？答案

【问题标题】：CSS3 PIE - Giving IE border-radius support not working?CSS3 PIE - 给 IE 边框半径支持不起作用？
【发布时间】：2010-08-19 13:16:37
【问题描述】：

我正在尝试使用 CSS3 PIE 附加行为在 IE 中制作圆角。

这是我的 CSS：

.fieldRow {
    clear:both;
    padding: 0;
    margin: 0;
    overflow: hidden;
    line-height:17px;
}
.alternate, .rowMousedOver {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(PIE.php);
    position: relative;
}
.rowMousedOver{
    background-color: #E2E66D !important;
}
.alternate {
    background-color: #FCFEE8;
}

这里是一些示例 HTML：

<div class="fieldRow alternate">
                <div class="label"><label id="title_label" for="title"> Title: </label></div>
                <div class="fieldWrapper required text">
                    <div class="cellValue"><input type="text" onchange="validateField(this)" name="title" id="title" value="Tax Free Savings Accounts" disabled=""></div>
                </div>
            </div>

当它悬停时，我通过 javascript 添加 rowMousedOver 到 fieldRow。

知道为什么这不起作用吗？我也尝试过使用behavior: url(PIE.htc)，但也没有成功。

谢谢！

【问题讨论】：

它可以在 Firefox 和 chrome 上运行吗？
可能是路径的问题。因为 htc 是 MS 标准，所以 url 路径是相对于文档而不是样式表的。您始终可以先尝试使用绝对 URL。
cordesmj 也建议这样做，但我把它放在正确的位置，它仍然没有四舍五入。
z-index 不适用于相对位置...仅适用于绝对位置 ;)

标签： internet-explorer css

【解决方案1】：

PIE.htc 请求应以 mime 类型“text/x-component”响应 - 否则 IE 不会触及该行为。您使用的 PIE.php 应该可以解决此问题。如果您不确定是否是这种情况，请使用 FireBug 的网络功能来检查对文件的直接请求。

还要注意，PIE.htc 的路径是相对于 HTML 页面的——而不是相对于你所期望的 css 文件。因此，请考虑将 .htc 的路径设为绝对路径。在这里，FireBug 可以再次帮助您检测您是否有 404 问题。

【讨论】：

我没有看到对 PIE.php 的请求，但我将 PIE.php 和 PIE.htc 都放在与正在运行的 PHP 文件相同的目录中。可能是什么问题？
它现在可以工作了，但是当我取出 PIE 的 css 时，我得到一个“第 0 行中的堆栈溢出”=S，我不再收到该错误。有什么想法吗？
没关系，我看到如果你将它应用到同一个元素两次（使用两个不同的类），它会导致堆栈溢出。我会限制在一个:) 非常感谢！！！

【解决方案2】：

尝试在您的 css 语句中添加 position: relative。我遇到过几次这个问题，通常可以通过这样做来解决。更多信息请访问：http://css3pie.com/documentation/known-issues/

【讨论】：

我已将它添加到 CSS 中，但仍然没有四舍五入 =S
看看simnom.co.uk/pie。这在使用 PIE.php 作为包含的行为文件的盒子上有圆角。
只需添加它在 IE8 中打开和关闭兼容模式即可。

【解决方案3】：

尝试添加

position:relative;
z-index: 0;

这里建议http://css3pie.com/forum/viewtopic.php?f=3&t=10

【讨论】：

【解决方案4】：

问题可能出在您的路径上，具体取决于您放置 PIE.htc 文件的位置。请注意，Pie 的“入门”文档 (here) 提到了以下内容：

...您需要调整路径以匹配您在第 2 步中上传 PIE.htc 的位置。注意：此路径是相对于正在查看的 HTML 文件的，而不是调用它的 CSS 文件。

因此，如果 PIE.htc 文件与您的 html 文件位于同一文件夹中，behavior: url(PIE.htc); 应该可以工作（至少，它对我有用 :-)）。

但是，不确定您希望看到什么圆形...受影响的 div 似乎没有任何可见的功能。如果您想看到圆角的 div，您可能需要使边框或背景可见，例如将 border: 1px solid black; 或 background-color: someColor; 添加到 fieldrow 类。

如果您想看到输入字段被四舍五入，您可能需要将类声明为.fieldRow input {...}

【讨论】：

我只是按照你说的做了，因为我有我的 CSS 所在的两个文件，但不在所有页面所在的根文件夹中，但它仍然不起作用（尝试了 PIE .htc 和 PIE.php)。
!important 声明似乎有点搞砸了……如果我删除它，代码似乎可以工作。另外，位置：相对；似乎没有必要。你用的是什么版本的IE？

【解决方案5】：

Neophyte 的回答（在头部使用条件注释）在其他一切似乎都很好/没有影响时帮助了我（在最简单的测试页面上，来自 IIS 7 和 IE8）

http://www.webmasterworld.com/forum83/9144.htm

希望对某人有所帮助

【讨论】：

【解决方案6】：

另外值得注意的是 - 当我使用!important 规则设置背景颜色时，我遇到了一个问题，即圆角在 lte IE8 中不起作用。不使用 !important 的另一个原因！

【讨论】：

【解决方案7】：

适合我的解决方案如下：

PIE.htc 的路径必须是绝对路径，例如行为：url(App_Themes/Default/PIE.htc)
确保您设置行为的 div 的样式为 Position:Relative

丹

【讨论】：