Internet explorer 圆角IE6

我想在IE6-9中获得圆角，我正在使用以下用于firefox、Chrome和Safari的css代码，效果很好，有没有一种方法可以在IE6中实现圆角而不使用背景图像

css代码：

.item{

   height:85px;
   line-height: 15px;
    text-align: center;


}

.item-header > div{

}
.item > div {
  background-color: #fff;
  height:85px;
  margin-bottom:10px;

}
.item-header > div:first-child{
    width:88px;
}

.item > div:first-child {
  border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
   border-left:2px solid #ededed;

}

.item-header > div:last-child{

}

.item > div:last-child {
  border-radius: 0 10px 10px 0;
  -moz-border-radius: 0 10px 10px 0;
   border-right:2px solid #ededed;
   margin-top:2px solid #ededed;
     margin-bottom:2px solid #ededed;

}

.itemHeader, .itemBody, .itemFlag, .item-header-content{
    float:left;

}

.itemHeader{
    width:85px;
    padding-top:10px;
    border-top:2px solid #ededed;
    border-bottom:2px solid #ededed;
    float:left;
    height:85px;
}

.itemBody{
    width:80px;
    height:85px;
    padding-top:10px;
    border-left:1px solid #ededed;
    border-right:1px solid #ededed;
    border-top:2px solid #ededed;
    border-bottom:2px solid #ededed;
    float:left;
}

.itemFlag{
    width:80px;
    padding-top:10px;
    border-top:2px solid #ededed;
    border-bottom:2px solid #ededed;
    float:left;
    height:85px;
}

.item-header-content{
    width:82px;
    height:50px;
    float:left;

}
.item-header-content a{
    padding:0px;
    margin:0px;
    text-align: center;
    color:#000;
}

.resize {
width: 80px;
height : auto;
margin-top:10px;

}

.Container-results{
    width:790px;
    border-spacing:0 1px;
    margin-left:1px;
    margin-right:1px;
    margin-bottom:10px;

Html代码：

<div class="Container-results">

                <div class="item">
                    <div class="itemHeader"> 

                    </div>
                    <div class="itemBody"> <strong style="font-size: 100%; color: #004A9E;">Roadside</strong></div>
                    <div class="itemBody"><div class="tick"><span>included</span></div></div>
                    <div class="itemBody"><div class="tick"><span>included</span></div></div>

                    <div class="itemBody"><div class="cross"><span>not included</span></div></div>
                    <div class="itemBody"><div class="cross"><span>not included</span></div></div>
                    <div class="itemBody"><div class="cross"><span>not included</span></div></div>
                    <div class="itemBody">
                    <strong>&pound;18<sup>.25</sup></strong>
                    </div>

                    <div class="itemFlag">
                    <a class = "btn btn-buy-online-now2" href="/breakdown/buy/58/?id=kwik-fit-insurance_roadside" target="_blank"></a>
                    <a href="/breakdown/more-info/913/?KeepThis=true&amp;TB_iframe=true&amp;height=600&amp;width=765&id=kwik-fit-insurance_roadside" class="thickbox"></a> 
                     </div>
                       </div></div>

---

可惜没有。IE 6-8不包括任何类型的边界半径支持。您唯一的解决方案是：

确切地知道你的div有多高和多宽，并使用透明的PNG背景，这在IE6上仍然不起作用。这不是一个好主意，会让你的布局和尺寸变得非常僵硬 图像和嵌套的div会严重污染标记。你也不想这么做 使用类似CurvyCorner的JavaScript库： 看看这里：这里：

如果您现在正在运行IE6，一定要尝试下面第二个链接中的演示：

---

我没有IE6，所以我不能告诉你它是否有效。

你可以试试漂亮的角落，应该可以在IE6上使用->

是目前为止IE6/7/8中获得圆角的最佳解决方案。最好的一点是，它与标准CSS边框半径配合使用，因此，如果用户使用任何其他浏览器，它对用户来说都是完全透明的

我衷心推荐它

它确实有一些已知的问题，但在所有其他可用的解决方案中都会遇到相同或更糟的问题

然而，我也衷心地建议不要费心让你的站点中所有的虚饰都与IE6协同工作。当然，要让网站在该浏览器中工作，但老实说，试图让它在IE6中看起来与在Chrome和Firefox中一样，这将是一场失败的战斗

[编辑]

最后一件事：我注意到您的样式表使用了'directchild'选择器>相当多-例如item>div{…}。请注意，IE6不支持此选择器类型。你的样式表将在IE6中严重失败

唯一的解决方法是在选择器之间使用一个空格，表示“任何后代”。这是可行的，但确实改变了CSS的含义

---

IE6也不支持：first child或：last child，这两个选项您都使用过。事实上，在IE7和IE8中，您也会遇到这两个方面的问题：除IE9外，任何版本的IE都不支持最后一个孩子，而IE7和IE8中都支持第一个孩子，但如果在动态内容中使用它，它会有严重的错误。

在问题中添加代码标记，这是难以辨认的