連続して登場する一連の弾丸を持っています。箇条書きのアニメーションには 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;
}