在 IE8 中使用 CSS3Pie htc 作为边框半径

Posted 2023-05-08

技术标签:

【中文标题】在 IE8 中使用 CSS3Pie htc 作为边框半径【英文标题】：Using CSS3Pie htc for border-radius in IE8 【发布时间】：2011-05-18 14:27:39 【问题描述】：

我正在使用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。

演示正在运行；只是不是我的代码！

谢谢，亚当

【问题讨论】：

【参考方案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?

【讨论】：

【参考方案2】：

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

检查您指定的 URL 是否确实加载了 PIE.htc 文件 - 即将该 URL 直接放入您的浏览器并查看结果。您的网络服务器可能由于某种原因（无法识别 MIME 类型？等）而无法正确提供服务

你通过known problems on the PIE site了吗？您是否已将position:relative; 添加到您的风格中？会不会是已知的z-index 问题？

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

顺便说一句——不相关的一点，但您应该将border-radius 样式低于带有特定浏览器前缀的版本。这是做事的标准方式，因为这意味着例如，当 Firefox 开始支持 border-radius 时，它将采用标准样式而不是 -moz-border-radius。如果你在它下面有-moz 版本，那它会继续被使用，这可能不是你想要的。

【讨论】：

实际上 URL 是相对于在浏览器中查看的 URL，而不是 CSS。一些 IE 怪异。但对我来说，重要的是它是在名为 pie 的子目录中还是在主文件旁边，即 url(PIE.htc) 有效，url(pie/PIE.htc) 无效。【参考方案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

我们遇到了这两个问题，希望它们能帮到你。

【讨论】：

【参考方案4】：

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

如果将过滤器应用于同一元素，则边框半径将不起作用。我将边框半径应用于一个按钮，并将线性渐变用作过滤器。一旦我删除了过滤器，边框半径就起作用了。

这是记录在案的行为，应使用 -pie-background 应用渐变：

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

【讨论】：

【参考方案5】：