我有一系列会陆续出现的子弹。我在子弹动画中使用 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;
}