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ハックの使用を調整するには：

<! - [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では正しく表示されます-正方形を表示しますが、他のブラウザでは表示されません-何も表示されません。ハックのない通常のクラスへの追加/ * /および\0/は機能しません。

問題の解決方法を教えてください。

4

2 に答える 2

0

IEの条件付きタグが間違っているようです。

<!--[if IE 8]> IE 8.0 <![endif]-->
于 2012-08-14T08:42:17.617 に答える
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 に答える