【问题标题】：CSS rounded corners in IE8IE8中的CSS圆角
【发布时间】：2011-10-27 23:39:56
【问题描述】：

我在 IE8 中遇到了圆角问题。我尝试了几种方法都没有成功。

这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  padding: 2px;
  margin: 2px;
  color: #505050;
  line-height: normal;
}
p {
  margin: 4px;
}
.categoryheading3 {
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  background-color: #297BB6;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  margin: 0px;
}
.leftcolumn {
  width: 174px;
  padding: 8px;
  float: left;
  display: inline-block;
  background-color: transparent;
  /*--min-height: 500px*/
  overflow: hidden;
}
.lefttop {
  display: inline-block;
  width: inherit;
  margin: 0 5px 2em 0;
  float: left;
  width: 160px;
  background-color: #FFFFFF;
  border: 2px solid #297BB6;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
</style>


</head>
<body>

<div class="leftcolumn">
  <div class="lefttop">
    <H4 class="categoryheading3">Heading</H4>
    <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p>
  </div>
</div>
</body>
</html>

在 Firefox 中产生这个：

但这在 IE8 中：

如果有人有任何提示，我将非常感激！

编辑：约瑟夫通过建议使用 pie.htc 提供帮助，但我仍在为这个元素不起作用：

.categoryheading3 {
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  behavior: url(PIE.htc);
  background-color: #297BB6;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  margin: 0px;
}

【问题讨论】：

在我看来你的 CSS 缺少标准的边界半径属性
你的 IE8 屏幕截图实际上看起来像 Metro UI ish :)

标签： css internet-explorer internet-explorer-8 rounded-corners

【解决方案1】：

Internet Explorer（版本 9 以下）本身不支持圆角。

有一个神奇的脚本会神奇地为你添加它：CSS3 PIE。

我用过很多次，效果惊人。

【讨论】：

这适用于所有角落都是圆形的元素，但是我似乎无法让它在只有左上角+右上角圆角的元素上工作 - 有什么建议吗？
@kevyn：你能告诉我你正在使用的 CSS 吗？ CSS3 PIE 仅支持速记属性 (border-radius: 5px 5px 0 0;)，不支持速记属性 (border-radius-topleft: 5px; etc.)。
您只使用供应商前缀的版本。 CSS3 PIE 使用标准的：border-radius。
PIE 正确渲染角，例如边框半径：30px 0 0 30px;，但它使我的 div 不透明。我正在使用不透明度：.6；和过滤器：alpha(opacity=60);
PIE 为我修复了圆角，但不知何故停止了背景颜色的工作，所以它似乎被击中和错过了

【解决方案2】：

Rounded corners in IE8

Internet Explorer 8（及更早版本）不支持圆角，但是您可以考虑的其他解决方案很少：

使用圆角 Images 代替（this 生成器是一个很好的资源）
使用来自here 的jQuery Corner plugin
使用来自 here 的名为 CSS3 PIE 的非常好的脚本（Pro's & Con's here）
从here结帐CSS Juice
另一个不错的脚本是来自here
的IE-CSS3

尽管 CSS PIE 是最受欢迎的解决方案，但我建议您查看所有其他解决方案并选择最适合您需求的解决方案。

希望它有用。祝你好运！

【讨论】：

【解决方案3】：

我不知道css3pie.com，看到这个帖子后非常有用的网站：

但是在测试之后它对我也不起作用。但是我发现将它包装在 .PHP 文件中效果很好。所以而不是：

behavior: url(PIE.htc);

使用这个：

behavior: url(PIE.php);

我把我的放在一个名为 jquery 的文件夹中，所以我的是：

 behavior: url(jquery/PIE.php);

所以转到他们的下载或在此处获取：

http://css3pie.com/download-latest

并使用他们的 PHP 文件。在 PHP 文件中，它解释了某些服务器未配置为正确使用 .HTC。这就是我遇到的问题。

试试吧！我做到了，它有效。希望这对其他人也有帮助。

【讨论】：

不幸的是，这在 IE8 上仍然没有为我做任何事情:(
这是因为您没有在网络服务器上为 .htc 文件配置正确的 MIME 类型。见：stackoverflow.com/a/4672959/229587

【解决方案4】：

http://fetchak.com/ie-css3/ 适用于 IE 6+。如果 css3pie 不适合您，请使用它。

【讨论】：

【解决方案5】：

PIE.htc 非常适合我 (http://css3pie.com/)，但有一个问题：

你应该写 PIE.htc 的绝对路径。当我使用相对路径时，它对我不起作用。

【讨论】：

看起来相对路径不是相对于这里的 css 文件，而是相对于 docroot
ph33nyx 几乎是正确的。使用 Internet Explorer 行为时，被引用的文档是相对于调用 HTML 文件的，而不是 CSS 文件。请在使用时注意这一点，这样您就不会疯狂地试图找出它不起作用的原因。
我使用它的相对路径为behavior: url(../PIE/PIE.htc);，它工作正常。
levgen 你不知道我有多感谢谢谢你！！！你是对的，相对路径不起作用，我研究了整个派论坛，我只是绝望，但我使用了完整的路径，然后它起作用了

【解决方案6】：

由于 Internet Explorer 本身不支持圆角。因此，更好的跨浏览器处理方法是在角落使用圆角图像。许多著名的网站都使用这种方法。

您还可以在网络上找到圆形图像生成器。一个这样的链接是http://www.generateit.net/rounded-corner/

【讨论】：

这是一个非常古老的方法，我不推荐这个。像 PIE 这样的库使 css3 在 ie8 中成为可能，这就是我们所需要的。