圆角不适用于IE9

Question

据我所知,IE9应该有圆角的CSS支持.我显然用这样的方式对我的页面进行了编码,尽管在IE9中没有这种情况 - 虽然它在Chrome和FF中正确显示.

*我已编辑CSS以反映下面的答案建议 - 问题仍然存在* 我需要左上角和左下角只对包含站点主导航的div进行舍入.

主机包显示框中的"立即激活"按钮也不起作用.

要查看的站点链接是http://activehost.co.nz

我已经检查了其他问题 - 最常见的原因(使用前缀)不是我正在做的事情.

部分的相关CSS如下.

导航:

    #main_nav {
    margin: 0px 0px 10px 0px;
    float: right;
    height: 37px;
    /*background:url(../img/nav_bg.png);
    background-repeat: repeat-x;*/
    background-color: #286e38;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38));
    background-image: -moz-linear-gradient(top, #6dc067, #286e38);
    background-image: -ms-linear-gradient(top, #6dc067, #286e38);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38));
    background-image: -webkit-linear-gradient(top, #6dc067, #286e38);
    background-image: -o-linear-gradient(top, #6dc067, #286e38);
    background-image: linear-gradient(top, #6dc067, #286e38);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-radius: 20px 0px 0px 20px;
    clear: right;

}

以及"立即激活"按钮的CSS:

     .hosting_order {
    position: absolute;
    top: 148px;
    border: none;
    height: 35px !important;
    background-color: #286e38;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38));
    background-image: -moz-linear-gradient(top, #6dc067, #286e38);
    background-image: -ms-linear-gradient(top, #6dc067, #286e38);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38));
    background-image: -webkit-linear-gradient(top, #6dc067, #286e38);
    background-image: -o-linear-gradient(top, #6dc067, #286e38);
    background-image: linear-gradient(top, #6dc067, #286e38);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: #ffffff;
    width: 120px;
    padding: 0px 20px;
    font-weight: bolder;
    font-size: 1.1em;
    border-radius:20px;
    box-shadow: 2px 2px #888888;
}

背景图像CSS是产生渐变效果 - 我想知道这是不是问题？

Answer 1

这是因为您为同一元素组合了fi​​lter和border-radius.尝试将border-radius应用于一个元素,并过滤到其子元素.