CSS圆角在IE8

fzwojiic 于 5个月前发布在其他

关注(0)|答案(6)|浏览(46)

我在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中产生：
x1c 0d1x的数据
在IE8中：

的
如果任何人有任何提示，我会非常感激！
edit：Joseph建议使用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

来源：https://stackoverflow.com/questions/7077331/css-rounded-corners-in-ie8