圆角不工作在IE9 [英] Rounded corners not working in IE9

问题描述

据我所知，IE9应该有圆角的CSS支持。我明显地编码我的页面，这样的方式，这并不发生在IE9虽然 - 虽然它正确地显示在Chrome和FF。

As far as I am aware, IE9 should have CSS support for rounded corners. I have apparently coded my page in such a way as this does not occur in IE9 though - although it displays correctly in Chrome and FF.

* 我已经编辑CSS以反映下面的答案的建议*
我需要顶部和底部左角只为包含站点主导航的div舍入。

*I have edited CSS to reflect suggestions as per answer below - the problem is still occurring * I need top and bottom left corners only to be rounded for the div that contains the site main navigation.

在主机包显示框中，立即激活按钮也不起作用。

The 'Activate Now' buttons are also not working, in the hosting package display boxes.

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

我已经检查过其他问题，最常见的原因（使用前缀）不是我在做的。

I've checked other questions - and the most common cause (using prefixes) is not something I am doing.

相关的CSS部分如下。

Relevant CSS for sections is below.

导航：

    #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：

And the CSS for the 'Activate Now buttons:

     .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是产生渐变效果 - 我想知道这是问题？

The background image CSS is to produce a gradient effect - I wonder if that's the problem?

推荐答案

这是因为您将filter和border-radius组合在一起。尝试对一个元素应用border-radius，然后过滤到其子元素。

It's because you combine filter and border-radius for same element. Try to apply border-radius to one element, and filter to its child element instead.

这篇关于圆角不工作在IE9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！