Question

我有一系列连续出现的子弹。我在子弹的动画中使用jQuery和jQuery UI。顶部的子弹需要有圆角，我使用CSS和PIE.htc来完成。这在所有非IE浏览器以及IE8中都很有效，但在IE7中，第一个子弹出现时它的背景大约有80％缩小，大约95％缩短（或者它可能偏向左上角）。 / p>

有趣的是，如果你根本调整broswer窗口的大小，背景就会卡入正确的位置（而不是子弹位于固定宽度的容器中，所以我没有在这里调整子弹大小）。如果我在我的CSS中注释掉PIE.htc行，则子弹正确显示，但我需要圆角。请参阅this image。

相关代码如下

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;
 }

Answer 1

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

使用此jquery插件可以在所有浏览器中获得圆角。没有角落图像，使用嵌套的dv来绘制边框。它灵活且易于使用。它还添加了对原生border-radius的支持，因此它只在不支持border-radius的浏览器上执行。

Answer 2

尝试添加回调以在效果后执行调整大小，这会导致元素正确重绘。

$([appripratebullet]).addClass('currentBullet')
                     .fadeIn('slow', 
                             function() {       
                                 if ($.browser.msie) {
                                     $(this).each(function() { $(this).resize(); }); 
                                 }
                             });

Answer 3

我为那些面临这个问题并且无法用这些答案解决的人做出这个答案，即使这个问题已经很老了。即使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);
}

PIE.htc和jQuery动画有冲突吗？

3 个答案: