如何使用 CSS 在 IE8 中制作圆角边框？答案

【问题标题】：How to make rounded border in IE8 with CSS?如何使用 CSS 在 IE8 中制作圆角边框？
【发布时间】：2013-09-13 11:17:29
【问题描述】：

我想知道如何在 IE8 中制作圆角边框。我正在使用

-moz-border-radius:4px;
-webkit-border-radius:4px;

适用于 Mozilla 和 Safari。

【问题讨论】：

以下是使用纯 CSS 而不使用 JAVASCRIPT 的方法。这是一个锣表演，很容易打破，但仍然如此。 Pure CSS rounded corners without images and javascript

标签： html css

【解决方案1】：

有一个 jQuery 插件。 http://jquery.malsup.com/corner/

【讨论】：

他没有问如何在没有 CSS 或 javascript 的情况下做到这一点。
@Rob：其他答案已经解释了不可能在 IE8 的纯 CSS 中实现。
我看到@kst 将此标记为“答案”，因为它解决了他的问题......但是“正确”的答案是......“你不能以同样的方式在 IE8 中纯粹用 CSS 做圆角您可以在 FF、Chrome、Safari 或 IE9 中使用。
这个问题并不要求纯 CSS 方法，它只是用 CSS 标记，所以我认为 kst 选择的答案绰绰有余。

【解决方案2】：

下载https://code.google.com/p/curved-corner/ 并包含在您的项目中。然后使用下面的 css 来圆角。

例如：

.somediv{
   -webkit-border-radius:4px;        /* older webkit based browsers */
   -khtml-border-radius:4px;         /* older khtml based browsers */
   -moz-border-radius:4px;           /* older firefox */
   border-radius:4px;                /* standard */
   behavior: url(border-radius.htc); /* IE 6-8 */
}

文件的 url 相对于加载 CSS 的 HTML 文件。所以这与 background: url(...) 行为不同，它是相对于 CSS 文件的。更多详情here

【讨论】：

【解决方案3】：

你不能。 IE 不处理现代标准和实践，具体来说，IE8 中不存在这样的 CSS 属性。

【讨论】：

你可以在 CSS 中做到这一点，这只是一个巨大的痛苦（太多的 div 标签）。或者，您可以使用 CSS 和圆角图像。

【解决方案4】：

在 IE9 中，您可以使用边框半径。

对于较旧的 IE 版本，有一些 javascript 库可以为您完成。你不能纯粹用 CSS 来做。至少你需要背景图片。

【讨论】：

你可以纯粹在 CSS 中做到这一点，这只是一个巨大的 hack 和颈部的痛苦（太多的 div 标签）。或者，您可以使用 CSS 和圆角图像。
@rockinthesixstring - 真的吗？我想如果你添加了足够多的 div，带有块和背景颜色......
我已经看到它完成了......实施起来很残酷，而且很容易破解。
这是我在说的废话worthapost.com/articles/…
@rockinthesixstring - 我认为是这样的。不完全是圆形，但足够接近。

【解决方案5】：

您可以为此使用 CSS3 PIE。这很容易实现。只需在此处下载：http://css3pie.com/download/ 并提取其内容。然后，在您的样式表上，只需将behavior:url(css3pie/PIE.htc); 以及使用border-radius 的每个元素的css 代码一起添加。

例如：

.samplediv{
    behavior:url(css3pie/PIE.htc);
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;       
    -moz-border-radius:10px;           
    border-radius:10px;               
}

【讨论】：