0

ここのページで 2.11 malsup jquery 曲線コーナーを使用しています。

http://robynrowe.sanscode.com

何らかの理由で、つまり、curvy corners スクリプトが境界線を非表示にします。

誰でもこれを修正するのを手伝ってもらえますか?

ボックスをdivでラップして背景色を設定することで、いくつかの回避策を試しました。修正なし。IE の曲がりくねったコーナーは不可能ですか? 誰かアイデアを持っていますか？

試してみたい場合は、jsfiddle をご覧ください: http://jsfiddle.net/KZYXH/

4

1 に答える 1

1

IEが大嫌い。

とにかく、jquery で修正するコードを作成する必要がありました。

 $(function(){
    if($.browser.msie) $('.box').each(function(){
        var c = $(this).attr('class').replace('box','');

        $(this).wrap('<div class="round-fix '+c+'" />');
    });

    $('.round-fix').corner();
    $('.round-fix .box').corner();
    });

残ったのは、すべてを実行するための CSS でした。

    .box{
        margin-bottom: 16px;
         padding:10px 10px 10px 10px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .border-pink{
        border: 2px solid #EB008B;
    }
    .border-brown{
        border: 2px solid #754C28;
        background-color: #F4EDE9;
    }
    .border-green{
        border: 2px solid #00AA00;
    }

/* IE FIX */
    .round-fix{
        margin-bottom: 1em;
        padding: 2px;
    }
    .round-fix .box{
        background-color: white;
        margin-bottom: 0;
    }
    .round-fix.border-pink{
        background-color:#EB008B;
    }
    .round-fix.border-brown{
        background-color:#754C28;
    }
    .round-fix.border-brown .box{
         background-color: #F4EDE9;
    }
    .round-fix.border-green{
        background-color: #00AA00;
    }

つまり、基本的に-背景色を使用して境界線の色を無視するため、角が表示されないボックスがたくさんありました。丸みを帯びた div を別の div でラップし、内側の div から外側の div に境界線の色を適用し (css を介して、これはおそらく jquery を介してより適切に実行できたはずです)、外側のボックスにパディングを追加しました。最後に、内箱を白、または通常使用する色に設定します。明らかに、これは透過性には機能しませんが、透過性が IE で動作するのはいつからですか :p. また、要素の内側のボックスに直接幅を設定した場合は、外側の要素にもその幅を設定する必要があることに注意してください。これは、内部要素に直接設定された CSS プロパティに当てはまります。

于 2011-03-13T23:42:59.707 に答える