css3 pie 不适用于动态 css 更改

Question

我正在使用 css3 PIE 来通过边界半径创建圆（在 IE8 中）。它工作正常。 但是当我试图改变圆形的背景颜色时，那个元素变成了正方形。 我的代码如下所示。

    .menuIco {
        width:16px;
        height:16px;
        border-radius:8px;
        position:relative;
        z-index:101;
        background-color:#38B6E7;
    }

    .active .menuIco {
        background-color:#F1F1F1;
    }

我的 html 看起来像这样..

    <div> <!-- i am adding .active class to this div using jquery -->
        <div class="menuIco"> </div>
    </div>

当我将活动类添加到父 div（动态使用 Jquery）时，menuIco（圆圈）应该改变它的颜色。但是border-radius 属性正在崩溃。

谁能帮我解决这个问题！ 提前致谢。

Answer 1

将边框半径设置为100%。

这是一个LIVE DEMO 供您查看。

 .menuIco {
        width:100px;
        height:100px;
        border-radius:100%;
        position:relative;
        z-index:101;
        background-color:#38B6E7;
    }

我已将宽度和高度设置为 100px，以便在更大的比例上显示它。 （可以根据需要调整大小）

编辑

根据您的浏览器，您应该考虑包含其他前缀，如this fiddle所示

边界半径定义为：

    -webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;