CSS 在 IE8 中使用 CSS3Pie htc 作为边框半径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4326363/
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
Using CSS3Pie htc for border-radius in IE8
提问by Adam Hopkinson
I'm using the CSS3Piehtc file to enable border-radiusin IE8, but I'm getting no effect. My CSS is:
我正在使用CSS3Piehtc 文件border-radius在 IE8 中启用，但没有任何效果。我的 CSS 是：
button {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
behavior: url(PIE.htc);
}
I've put PIE.htc in the public root (as is done on the CSS3PIE demo page), having tried in the same folder, using a relative uri and an absolute uri.
我已经将 PIE.htc 放在公共根目录中（就像在 CSS3PIE 演示页面上所做的那样），在同一个文件夹中尝试过，使用相对 uri 和绝对 uri。
The demos are working; just not my code!
演示正在运行；只是不是我的代码！
Thanks, Adam
谢谢，亚当
回答by Daniel Rehner
Try adding
尝试添加
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
正如这里所建议的http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here:
这个问题类似于此处发布的问题：
回答by Spudley
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.
中引用的 PIE.htc 的 URLbehavior: url(PIE.htc);是一个相对 URL，因此它可能正在与样式表相同的目录中查找它，因此我建议添加一个斜杠以使其成为绝对 URL。但你说你已经做到了。
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)
检查您指定的 URL 是否确实加载了 PIE.htc 文件 - 即将该 URL 直接放入您的浏览器，看看会出现什么。您的 Web 服务器可能由于某种原因无法正确提供服务（无法识别 mime 类型？等）
Have you gone through the known problems on the PIE site? Have you added position:relative;to your style? Could it be the known z-indexissue?
您是否已解决 PIE 站点上的已知问题？你增加position:relative;了你的风格吗？这可能是已知z-index问题吗？
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)
您指定它在 IE8 中不起作用。你在 IE7 中试过吗？IE6？结果一样吗？（这将消除它是 IE8 特定问题的可能性）
By the way -- unrelated point, but you should put the border-radiusstyle belowthe versions with the browser-specific prefixes. This is the standard way to do things, as it means that when for example, Firefox starts supporting border-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.
顺便说一句 - 无关点，但您应该将border-radius样式放在具有浏览器特定前缀的版本下方。这是做事的标准方式，因为这意味着，例如，当 Firefox 开始支持 时border-radius，它会在-moz-border-radius. 如果你有-moz低于它的版本，那个版本将继续被使用，这可能不是你想要的。
回答by bandrzej
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.
正如 Daniel Rehner 所说，您需要为 IE8 使用 position:relative 和 z-index 属性。如果您使用带有子目录的网站来调用 CSS 文件，您还需要在 CSS 中使用绝对路径到 PIE.htc - 这是我们问题的一部分。
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
问题的另一部分可能是您的服务器没有将 PIE.htc 文件输出为 text/x-component。您可以通过 IIS 或 Apache 进行更正，或者在您的 CSS 中调用 PIE.php 脚本。更多信息在这里：http: //css3pie.com/documentation/known-issues/#content-type
Both of these issues had gotten us, and hope they help you out.
这两个问题都困扰着我们，希望它们能帮到你。
回答by Linus Norton
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:
这是记录在案的行为，应使用-pie-background以下方法应用渐变：
http://css3pie.com/documentation/supported-css3-features/#gradients
http://css3pie.com/documentation/supported-css3-features/#gradients
回答by james6848
Just in case anyone is trying to apply this to table cells, you'll need to apply position: relativeto the tableelement (and not the tdor th, even though those are the elements being rounded).
万一有人试图将其应用到表格单元格，则需要应用position: relative到table元素（而不是td或者th，即使是那些被圆润的元素）。
回答by HymanSD
behavior: url(PIE.htc);
Make sure there is no space between the urland (as this stopts it from working at all in IE8
确保url和之间没有空格，(因为这会阻止它在 IE8 中工作
