0

我需要在 IE8 中绘制一个倾斜的椭圆。

使用 PIE.js 显示边框半径

要在其他浏览器中显示，请使用以下代码：

.levelConfidenceCircleBlue {
    position: relative;
    float: left;
    width: 19px;
    height: 18px;
    background: none;
    z-index: 10;
    margin-top: -8px;
    margin-left: 5px;
    margin-right: 2px;
}

.levelConfidenceCircleBlue:before,
.levelConfidenceCircleBlue:after {
    position: absolute;
    content: "";

    width: 15px;
    height: 18px;
    left: 0px;
    background: #00A7E7;
    -moz-border-radius: 50px/63px;
    border-radius: 50px/63px;
    -webkit-transform: rotate(26deg);
       -moz-transform: rotate(26deg);
        -ms-transform: rotate(26deg);
         -o-transform: rotate(26deg);
            transform: rotate(26deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}

调整使用 IE8 hack：

<! - [if IE 8]>
.levelConfidenceCircleBlue:before,
.levelConfidenceCircleBlue:after {
    position: absolute;
    content: "";

    width: 15px;
    height: 18px;
    left: 0px;

    background: none;
    border-radius: 60px 40px 60px 40px;
    -pie-background: #00A7E7;
}
<! [endif] ->

没有改变。但是，如果您将其更改为：

<! - [if IE 8]>    
.levelConfidenceCircleBlue {
        position: relative;
        float: left;
        width: 19px;
        height: 18px;
        background: none;
        z-index: 10;
        margin-top: -8px;
        margin-left: 5px;
        margin-right: 2px;
    }

    .levelConfidenceCircleBlue:before,
    .levelConfidenceCircleBlue:after {
        position: absolute;
        content: "";

        width: 15px;
        height: 18px;
        left: 0px;

        background: none;
        border-radius: 60px 40px 60px 40px;
        -pie-background: #00A7E7;
    }
<! [endif] ->

它在 IE9 中的 IE8 中正确显示 - 显示正方形，在其他浏览器中 - 不显示任何内容。除了没有hacks的常规课程/ * /和\ 0 /不起作用。

你能告诉我如何解决这个问题吗？

4

2 回答 2

0

问题已经解决了。
问题是连接了 PIE.js。

连接改为：

updatePIEButtons = function () {
    if ($.browser.msie && $.browser.version == 8) {


        $(".levelConfidenceCircleBlue").each(function () {
                PIE.detach(this);
                PIE.attach(this);
            });
        }
        else {
            $("[other classes]").each(function () {
                PIE.detach(this);
                PIE.attach(this);
            });
        }
    };
于 2012-08-14T09:35:50.077 回答
0

您的 IE 条件标记似乎是错误的。

<!--[if IE 8]> IE 8.0 <![endif]-->
于 2012-08-14T08:42:17.617 回答