Question

我正在使用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在同一个文件夹中。

演示正在进行;只是不是我的代码！

谢谢，亚当

Answer 1

尝试添加

position:relative;
z-index: 0;

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

所建议的那样

这个问题类似于此处发布的问题：

CSS3 PIE - Giving IE border-radius support not working?

Answer 2

behavior: url(PIE.htc);中引用的PIE.htc的URL是一个相对URL，所以它可能在与样式表相同的目录中查找它，所以我建议添加斜杠以使其成为绝对值URL。但是你说你已经做到了。

检查您指定的URL是否确实加载了PIE.htc文件 - 即将该URL直接放入您的浏览器中，看看会出现什么。您的Web服务器可能由于某种原因而未正确提供（不识别mime类型等）

你经历过known problems on the PIE site吗？你有没有添加position:relative;你的风格？可能是已知的z-index问题吗？

您指定它在IE8中不起作用。你在IE7中试过吗？ IE6？结果相同？（这将消除它是IE8特定问题的可能性）

顺便说一下 - 不相关的一点，但你应该将border-radius样式放在下面的版本和浏览器特定的前缀。这是执行操作的标准方法，因为这意味着当Firefox开始支持border-radius时，它会选择-moz-border-radius上的标准样式。如果你的-moz版本低于它，则会继续使用它，这可能不是你想要的。

Answer 3

正如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

这两个问题都让我们感到高兴，并希望他们帮助你。

Answer 4

我实际上遇到了这个问题的原因完全不同。

如果过滤器应用于同一元素，则border-radius将不起作用。我将border-radius应用于一个按钮，其中线性渐变应用为过滤器。一旦我删除过滤器，边界半径就会起作用。

这是记录的行为，应使用-pie-background：

应用渐变

http://css3pie.com/documentation/supported-css3-features/#gradients

Answer 5

behavior: url(PIE.htc);

确保url和(之间没有空格，因为这会阻止它在IE8中完全正常工作

Answer 6

如果有人试图将此应用于表格单元格，您需要将position: relative应用于table元素（而不是td或th ，即使这些元素被舍入了。）

在IE8中使用CSS3Pie htc作为border-radius

6 个答案: