3

連続して登場する一連の弾丸を持っています。箇条書きのアニメーションには jQuery と jQuery UI を使用しています。一番上の箇条書きには、CSS と PIE.htc を使用して角を丸くする必要があります。これはすべての非 IE ブラウザーと IE8 でうまく機能しますが、IE7 では、最初の箇条書きの背景が約 80% 狭く、約 95% 短く表示されます (または、左上に極端にずれている可能性があります)。

興味深いことに、ブラウザ ウィンドウのサイズをまったく変更すると、背景が適切な場所にスナップされます (箇条書きは固定幅のコンテナにあるわけではないので、ここでは箇条書きのサイズを変更しません)。CSS の PIE.htc 行をコメント アウトすると、箇条書きは正しく表示されますが、角を丸くする必要があります。この画像を参照してください。

関連するコードは次のとおりです

JS

$([appripratebullet]).addClass('currentBullet').fadeIn('slow').prev().removeClass('currentBullet', 'slow');

CSS

.bullet
{
 display:none;
 color:#6e6e6e;
 min-height:40px;
 font-size:2.5em;
 line-height:1.5em;
 font-weight:normal;
 position:relative;
 padding:25px 20px;
 margin-top:1px;
 background:#eeeeee;
 border-bottom:1px solid #fff;
}
.bullet.first{
 margin-top:0;
 -moz-border-radius:8px 8px 0 0;
 -webkit-border-radius:8px 8px 0 0;
 border-radius:8px 8px 0 0;
 behavior: url(/Content/PIE.htc);
 }
.bullet.currentBullet{
 background:#d98452;
 color:#fff;
 }
4

3 に答える 3

4

http://jquery.malsup.com/corner/

この jquery プラグインを使用して、すべてのブラウザーで角を丸くします。コーナー イメージはありません。ネストされた dv を使用して境界線を描画します。柔軟で使いやすいです。また、ネイティブのborder-radiusのサポートが追加されているため、border-radiusをサポートしていないブラウザーでのみ実行されます。

于 2011-02-02T08:11:22.383 に答える
1

効果の後にサイズ変更を行うためにコールバックを追加してみてください。これにより、要素が正しく再描画されます。

$([appripratebullet]).addClass('currentBullet')
                     .fadeIn('slow', 
                             function() {       
                                 if ($.browser.msie) {
                                     $(this).each(function() { $(this).resize(); }); 
                                 }
                             });
于 2011-06-06T09:35:31.497 に答える
0

この質問はかなり古いですが、この問題に直面し、これらの回答で解決できない人のために、この回答を作成します。jquery.corner.js でさえ素晴らしいですが、入力要素では使用できません。

アニメーションが完了した後にこの簡単な方法を使用すると、pie.htc を完璧にすることができます。

function fixButton() {
    if ((navigator.userAgent.toLowerCase().indexOf("msie") != -1) && document.all)
        $("body").height("99.9%"); setTimeout(function () { $("body").height("100%"); }, 0);
}
于 2014-05-20T08:33:18.233 に答える