html - 圆圈在 IE8 中显示不正确

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 中正确显示 - 显示正方形，在其他浏览器中 - 不显示任何内容。 除了常规类(class)之外，没有 hack/*/和\0/不起作用。

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

Answer 1

您的 IE 条件标签似乎有误。

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