Question

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

这是我的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)，但也没有运气。

谢谢！

Answer 1

尝试在您的css语句中添加position: relative。我已经有过几次这个问题了，通常这样做就解决了。更多信息可在以下网址找到：http://css3pie.com/documentation/known-issues/

Answer 2

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

另请注意，PIE.htc的路径是相对于HTML PAGE的 - 与您期望的css文件无关。所以考虑建立绝对的.htc路径。在这里，FireBug可以再次帮助您检测您是否有404问题。

http://css3pie.com/documentation/known-issues/

的更多信息

Answer 3

尝试添加

position:relative;
z-index: 0;

正如http://css3pie.com/forum/viewtopic.php?f=3&t=10

所建议的那样

Answer 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 {...}

Answer 5

Neophyte的答案（在头部使用条件评论）帮助我，当其他一切看起来很好/没有什么区别时（在最简单的测试页面上，来自IIS 7与IE8）

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

希望能帮到某人

Answer 6

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

Answer 7

对我有用的解决方案如下：

PIE.htc的路径必须是绝对的，例如behavior：url（App_Themes / Default / PIE.htc）
确保您设置行为的div具有Position：Relative

丹

CSS3 PIE - 给IE边界半径支持不起作用？

7 个答案: