PIE.htc 和 jQuery 动画冲突？

Posted 2023-05-08

【中文标题】PIE.htc 和 jQuery 动画冲突？

【英文标题】：PIE.htc and jQuery animation conflict?

【发布时间】：2011-06-04 02:32:43

【问题描述】：

我有一系列会连续出现的子弹。我在子弹动画中使用 jQuery 和 jQuery UI。顶部的子弹需要有圆角，我使用 CSS 和 PIE.htc 来完成。这在所有非 IE 浏览器以及 IE8 中都非常有效，但在 IE7 中，第一个项目符号的背景大约 80% 变窄，大约 95% 变短（或者它可能与左上角有很大的偏移）。

有趣的是，如果您完全调整浏览器窗口的大小，背景会捕捉到适当的位置（不是项目符号位于固定宽度的容器中，所以我不在这里调整项目符号的大小）。如果我在我的 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;
 

【问题讨论】：

啊哈.htc 恶魔！我宁愿放弃 IE 支持或委托给不同的开发人员。

【参考方案1】：

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

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

【参考方案2】：

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

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

【参考方案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);