CSS圆角在IE8

我在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;
}

解决方法

Internet Explorer(版本9下)不支持圆角。

有一个惊人的脚本，将神奇地添加到你：CSS3 PIE。

我使用它很多次，有惊人的结果。

原文链接：https://www.f2er.com/css/223411.html

解决方法

猜你在找的CSS相关文章