在 IE8 中使用 CSS 在 <hr> 标签上设置圆角答案

【问题标题】：Setting rounded corners in IE8 on <hr> tag with CSS在 IE8 中使用 CSS 在 <hr> 标签上设置圆角
【发布时间】：2012-09-07 16:33:30
【问题描述】：

我在 IE8 上遇到border-radius CSS 属性问题。在 Safari、Chrome、FF 和 IE9 上，此属性按预期工作。但是，在 IE8 上却没有。

我已经阅读了一些关于实现 jQuery Corner 插件的帖子和 cmets，但我在这方面的成功有限。我不确定问题是否在于尝试将其应用于<hr>。

有没有办法单独在 CSS 中实现圆角效果，而不必使用 jQuery Corner 插件？

我的标记：

<span id="title_divider"><hr /></span>

我的 CSS：

    #title_divider {
        position: absolute;
        width: 49px;
        left: 472px;
        top: 64px;
        padding-top: 10px;
    }
    #title_divider hr {
        height: 10px;
        background-color: #000000;
        border: 1px solid black;
        border-radius: 7px;
        height: 5px;
    }

【问题讨论】：

我只是不会这样做，所有这些只会产生太多的脚本开销，以至于 IE8 的圆角很酷的因素是不值得的（只会降低性能）
必须是<hr /> 标签吗？或者你能把它换成SPAN吗？让 LOOK 看起来像 HR 比您想象的要容易得多 - 并且它应该支持所有主要浏览器中的圆角。如果您可以使用SPAN，请告诉我，我会给您演示。

标签： jquery html css rounded-corners

【解决方案1】：

使用这个css3pie.com 可以修复所有不支持边框半径的低版本中的问题。

【讨论】：

【解决方案2】：

是的有。

看看css3pie here。

您需要做的就是在您的服务器上包含该文件，然后在您的 css 中指向它，如下所示：

behavior: url(/PIE.htc);

【讨论】：

请注意，PIE 会为页面上的每个圆角增加 10 毫秒的开销。
@PavelPodlipensky 我找到了另一个可能对 OP 有帮助的问题的答案：stackoverflow.com/questions/8760044/…
@Sam 是否可以仅在需要时包含该文件以减少开销？