CSS CSS3 PIE - 给予 IE 边界半径支持不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3522145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 PIE - Giving IE border-radius support not working?
提问by Garrett
I am trying to make rounded corners in IE with the CSS3 PIEattached behavior.
我正在尝试使用CSS3 PIE附加行为在 IE 中制作圆角。
Here is my CSS:
这是我的 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:
这是一些示例 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 rowMousedOverto the fieldRowwhen it is hovered.
并通过 javascript 我添加rowMousedOver到fieldRow悬停时。
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.
知道为什么这不起作用吗？我也试过使用behavior: url(PIE.htc)，但也没有运气。
Thanks!
谢谢！
回答by simnom
Try adding a position: relativeinto you css statement. I've had that issue a couple of times and it's normally resolved by doing that. Further information can be found at: http://css3pie.com/documentation/known-issues/
尝试将 a 添加position: relative到您的 css 语句中。我遇到过几次这个问题，通常可以通过这样做来解决。更多信息请访问：http: //css3pie.com/documentation/known-issues/
回答by mawtex
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.
PIE.htc 请求应以 MIME 类型“text/x-component”响应 - 否则 IE 不会触及该行为。您使用的 PIE.php 应该可以解决这个问题。如果您不确定是否是这种情况，请使用 FireBug 的网络功能检查对文件的直接请求。
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.
另请注意，PIE.htc 的路径是相对于 HTML 页面的 - 与您期望的 css 文件无关。因此，请考虑将 .htc 路径设为绝对路径。FireBug 可以再次帮助您检测您是否有 404 问题。
More info at http://css3pie.com/documentation/known-issues/
回答by Daniel Rehner
Try adding
尝试添加
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
回答by Mike C
The problem may be in your path, depending on where you put the PIE.htc file. Note that Pie's 'getting started' documentation (here) mentions the following:
问题可能出在您的路径中，具体取决于您放置 PIE.htc 文件的位置。请注意，Pie 的“入门”文档（此处）提到了以下内容：
...you will need to adjust the path to match where you uploaded PIE.htc in step 2. Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
...您需要调整路径以匹配您在步骤 2 中上传 PIE.htc 的位置。注意：此路径与正在查看的 HTML 文件相关，而不是与调用它的 CSS 文件相关。
So behavior: url(PIE.htc);should work if the PIE.htc file is in the same folder as your html file (at least, it worked for me :-) ).
因此，behavior: url(PIE.htc);如果 PIE.htc 文件与您的 html 文件位于同一文件夹中，则应该可以工作（至少，它对我有用:-)）。
However, not sure what you want to see rounded... the div that would be affected doesn't seem to have any visible features. If you want to see the div with rounded corners, you might want to make the border or background visible, such as adding border: 1px solid black;or background-color: someColor;to the fieldrow class.
但是，不确定您想看到什么圆形……受影响的 div 似乎没有任何可见的功能。如果您想看到带圆角的 div，您可能希望使边框或背景可见，例如添加border: 1px solid black;或background-color: someColor;到 fieldrow 类。
If you want to see the input field rounded, you might want to declare the class as .fieldRow input {...}
如果您想查看四舍五入的输入字段，您可能需要将该类声明为 .fieldRow input {...}
回答by MemeDeveloper
Neophyte's answer here (to use a conditional comment in the head section) helped me out when everything else seemed fine / did not make a difference (on the simplest of test pages, from IIS 7 with IE8)
新手在这里的回答（在头部部分使用条件注释）在其他一切看起来都很好/没有任何区别时帮助了我（在最简单的测试页面上，来自 IIS 7 和 IE8）
http://www.webmasterworld.com/forum83/9144.htm
http://www.webmasterworld.com/forum83/9144.htm
Hope that helps someone
希望能帮助某人
回答by Dan
Also worth noting - I had an issue where rounded corners were not working in lte IE8 when I'd set a background color with an !importantrule after it. Another reason not to use !important!
同样值得注意的是 - 我遇到了一个问题，当我!important在它之后设置带有规则的背景颜色时，圆角在 lte IE8 中不起作用。另一个不使用 !important 的原因！
回答by Dan
A solution that works for me is as follows:
对我有用的解决方案如下：
- The path to PIE.htc needs to be absolute e.g. behavior: url(App_Themes/Default/PIE.htc)
- Make sure the div that you set the behavior in has a style of Position: Relative
- PIE.htc 的路径需要是绝对的，例如行为：url(App_Themes/Default/PIE.htc)
- 确保您设置行为的 div 的样式为 Position:Relative
Dan
担
