Question

我需要在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 /的常规类之外，它们不起作用。

请告诉我如何解决问题？

Answer 1

IE的条件标签似乎不对。

<!--[if IE 8]> IE 8.0 <![endif]-->

Answer 2

问题解决了。
问题与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);
            });
        }
    };

在IE8中，圆圈无法正常显示

2 个答案: