在 IE8 中使用 CSS3Pie htc 作为 border-radius
我正在使用 CSS3Pie htc 文件在 IE8 中启用 border-radius，但我'我没有效果。我的 CSS 是：
button {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
behavior: url(PIE.htc);
}
我已将 PIE.htc 放在公共根目录中（如 CSS3PIE 演示页面上所做的那样），并尝试在同一文件夹中使用相对 uri 和绝对 uri。
演示正在运行；只是不是我的代码！
谢谢，亚当
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
尝试
按照此处的建议添加 http://css3pie.com/forum/viewtopic .php?f=3&t=10
这个问题与此处发布的问题类似：
CSS3 PIE - 给 IE border-radius 支持不起作用？
Try adding
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here:
CSS3 PIE - Giving IE border-radius support not working?
behavior: url(PIE.htc);中引用的 PIE.htc 的 URL 是一个相对 URL，因此它可能会在与样式表相同的目录中查找它，所以我建议添加斜杠使其成为绝对 URL。但你说你已经这么做了。检查您指定的 URL 是否确实加载了 PIE.htc 文件 - 即将该 URL 直接放入您的浏览器中，看看会出现什么结果。您的 Web 服务器可能由于某种原因无法正确提供服务（无法识别 MIME 类型？等等）
您是否已浏览过 PIE 网站上存在已知问题？您是否已将
position:relative;添加到您的样式中？这可能是已知的z-index问题吗？您指定它在 IE8 中不起作用。你在IE7下试过吗？ IE6？结果一样吗？ （这将消除它是 IE8 特定问题的可能性）
顺便说一句 - 无关的点，但您应该将
border-radius样式低于版本浏览器特定的前缀。这是标准的处理方式，因为这意味着当 Firefox 开始支持border-radius时，它将采用-moz-border-radius< 的标准样式/代码>。如果您拥有低于其的-moz版本，则该版本将继续被使用，这可能不是您想要的。The URL of PIE.htc as referenced in
behavior: url(PIE.htc);is a relative URL, so it is probably looking for it in the same directory as the stylesheet, so I'd suggest adding a slash to make it an absolute URL. But you say you've already done that.Check that the URL you're specifying does actually load the PIE.htc file - ie put that URL directly into your browswer and see what comes out. It is possible that your web server is not serving it correctly for one reason or another (not recognising the mime type? etc)
Have you gone through the known problems on the PIE site? Have you added
position:relative;to your style? Could it be the knownz-indexissue?You specify that it doesn't work in IE8. Have you tried it in IE7? IE6? Same result? (this will eliminate ths possibility of it being an IE8-specific issue)
By the way -- unrelated point, but you should put the
border-radiusstyle below the versions with the browser-specific prefixes. This is the standard way to do things, as it means that when for example, Firefox starts supportingborder-radius, it'll pick up the standard style over-moz-border-radius. If you've got the-mozversion below it, that one will continue getting used, which may not be what you want.正如 Daniel Rehner 所说，您需要使用 IE8 的position:relative 和 z-index 属性。如果您使用带有子目录的网站来调用 CSS 文件，您还需要在 CSS 中使用 PIE.htc 的绝对路径 - 这是我们问题的一部分。
问题的另一部分可能是您的服务器未将 PIE.htc 文件输出为 text/x-component。您可以通过 IIS 或 Apache 更正该问题，或者在 CSS 中调用 PIE.php 脚本。更多信息在这里： http://css3pie.com/documentation/known-issues/#content -type
这两个问题都困扰着我们，希望它们能帮助您解决。
As Daniel Rehner stated, you need to use the position: relative and z-index properties for IE8. If you are using a website with sub directories to call the CSS file, you will also need to use an absolute path in your CSS to PIE.htc - this was one part of our issue.
The other part of the issue could be that your server is not outputting the PIE.htc file as text/x-component. You can correct that via IIS or Apache, or call the PIE.php script in your CSS. More info here: http://css3pie.com/documentation/known-issues/#content-type
Both of these issues had gotten us, and hope they help you out.
事实上，我遇到这个问题的原因完全不同。
如果将过滤器应用于同一元素，则边框半径将不起作用。我将边框半径应用于一个按钮，并将线性渐变用作过滤器。当我移除过滤器后，边框半径就起作用了。
这是记录的行为，应使用
-pie-background应用渐变：http://css3pie.com/documentation/supported-css3-features/#gradients
I actually had this problem for a completely different reason.
The border-radius will not work if a filter is applied to the same element. I was applying the border-radius to a button with a linear gradient applied as a filter. As soon as I removed the filter the border-radius worked.
This is documented behaviour and gradients should be applied using
-pie-background:http://css3pie.com/documentation/supported-css3-features/#gradients
确保
url和(之间没有空格，因为这会阻止它在 IE8 中工作Make sure there is no space between the
urland(as this stopts it from working at all in IE8以防万一有人尝试将此应用于表格单元格，您需要将
position:relative应用到table元素（而不是td 或th，即使这些是被舍入的元素）。Just in case anyone is trying to apply this to table cells, you'll need to apply
position: relativeto thetableelement (and not thetdorth, even though those are the elements being rounded).