Question

我想在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>

Answer 1

可悲的是没有。 IE 6-8不包括任何类型的border-radius支持。您唯一的解决方案是：

确切知道div的高度和宽度，并使用透明的PNG背景，这仍然不适用于IE6。（不是一个好主意，使你的布局和尺寸非常不灵活）
使用图像和嵌套的div尝试执行此操作可怕地污染您的标记。（你也不想这样做）
使用像CurvyCorners这样的JavaScript库：http://www.curvycorners.net

Answer 2

在这里查看：http://jonraasch.com/blog/css-rounded-corners-in-all-browsers和此处：http://snook.ca/archives/html_and_css/rounded_corners_experiment_ie/

如果您现在正在运行IE6，请务必从第二个链接（此处：http://snook.ca/technical/rounded_corners/）尝试演示。

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

Answer 3

你可以试试“Nifty Corners”应该适用于IE6-＆gt;

http://www.html.it/articoli/nifty/index.html

Answer 4

CSS3Pie 到目前为止是在IE6 / 7/8中获得圆角的最佳解决方案。关于它的最好的事情是它适用于标准的CSS border-radius，因此如果用户使用任何其他浏览器，它对用户完全透明。

我衷心推荐它。

它确实存在一些已知问题，但是对于所有其他可用解决方案，您会遇到相同或更差的问题。

但是，我也衷心建议不要打扰你的网站中的所有装饰用IE6。当然，在该浏览器中使网站工作，但老实说，尝试在IE6中看起来与在Chrome和Firefox中看起来一样，这将是一场失败的战斗。

[编辑]

最后一件事：我注意到你的样式表使用了'直接子'选择器（>）非常多 - 例如.item > div {...}。请注意，IE6不支持此选择器类型。在IE6中，你的样式表将会失败。

解决这个问题的唯一方法是在选择器之间只使用一个空格，用于“任何后代”。这有效，但确实改变了CSS的含义。

IE6也不支持您使用过的:first-child或:last-child。事实上，在IE7和IE8中你也会遇到这两个问题 - 除了IE9之外的任何版本的IE都不支持:last-child，而IE7和IE8支持first-child如果你在动态内容中使用它，它会有严重的错误。

圆角IE6

4 个答案: