Rounded corners in IE8

Question

我在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中产生这个：

firefox example

但这在IE8中：

IE8 makes me sad

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

编辑：约瑟夫建议使用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;
}

Answer 1

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

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

我已经使用了很多次，效果惊人。

Answer 2

Rounded corners in IE8

Internet Explorer 8（及更早版本）不支持圆角， 您可以考虑使用其他几种解决方案： < / p>

使用圆角Images代替（this生成器是一个很好的资源）

使用here

中的jQuery Corner plugin

使用来自 here （专业版和版本here）

的名为CSS3 PIE的非常好的脚本

从here

结帐CSS Juice

另一个好的脚本来自 here

IE-CSS3

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

希望它有用。祝你好运！

Answer 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用法。这就是我遇到的问题。

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

Answer 4

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

Answer 5

PIE.htc对我很有帮助（http://css3pie.com/），但有一个问题：

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

Answer 6

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

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

IE8中的CSS圆角

6 个答案:

Rounded corners in IE8