【问题标题】:Using CSS3Pie htc for border-radius in IE8在 IE8 中使用 CSS3Pie htc 作为边框半径
【发布时间】: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。

演示正在运行;只是不是我的代码!

谢谢,亚当

【问题讨论】:

    标签: css css3pie html-components


    【解决方案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】:
          behavior: url(PIE.htc);
          

          确保url( 之间没有空格,因为这会阻止它在 IE8 中运行

          【讨论】:

          • 谢谢,但是没有空格
          • 有些编辑器在粘贴文本时会插入一个空格。
          【解决方案6】:

          以防万一有人试图将此应用于表格单元格,您需要将position: relative 应用于table 元素(而不是tdth,即使这些元素是圆角)。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2012-02-24
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2012-01-08
            • 2011-12-07
            • 1970-01-01
            相关资源
            最近更新 更多