CSS3 PIE - 给予 IE 边界半径支持不起作用? [英] CSS3 PIE - Giving IE border-radius support not working?

问题描述

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

这是我的 CSS:

.fieldRow {清除:两者；填充:0；边距:0；溢出:隐藏；行高:17px；}.alternate, .rowMousedOver {-moz-border-radius: 10px;-webkit-border-radius: 10px;边框半径:10px；行为:网址(PIE.php)；位置:相对；}.rowMousedOver{背景颜色:#E2E66D ！重要；}.alternate {背景颜色:#FCFEE8；}

这里是一些示例 HTML:

<div class="label"><label id="title_label" for="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="">

并通过 javascript 我将 rowMousedOver 添加到 fieldRow 悬停时.

知道为什么这不起作用吗?我也试过使用 behavior: url(PIE.htc)，但也没有运气.

谢谢！

解决方案

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

另请注意，PIE.htc 的路径是相对于 HTML 页面的 - 与您期望的 css 文件无关.因此，请考虑将 .htc 路径设为绝对路径.FireBug 可以再次帮助您检测您是否遇到 404 问题.

更多信息请访问 http://css3pie.com/documentation/known-issues/

I am trying to make rounded corners in IE with the CSS3 PIE attached behavior.

Here is my 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;
}

and here is some sample 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>

and via javascript I add rowMousedOver to the fieldRow when it is hovered.

Any idea as to why this is not working? I've also tried using behavior: url(PIE.htc), but had no luck with that either.

Thanks!

解决方案

The PIE.htc requests should respond with the mime type "text/x-component" - or IE won't touch the behaviour. The PIE.php you use should fix this. If you are not sure if this is the case, use FireBug's Net feature to check a direct request to the file.

Also note that the path to PIE.htc is relative TO THE HTML PAGE - not relative to the css file which you would expect. So consider making the path to the .htc absolute. Here FireBug can help you again to detect if you have a 404 issue.

More info at http://css3pie.com/documentation/known-issues/

这篇关于CSS3 PIE - 给予 IE 边界半径支持不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！